如何在CSS中垂直居中放置圖像和文本

我在這裏有這個小提琴，我想垂直居中放置在頁眉中的文本，頁腳中的圖片和中間的圖片粘貼到頁眉中。不知道如何實現這一點，我已經嘗試了一些東西，但無濟於事。我希望對你有所幫助這裏SO（=如何在CSS中垂直居中放置圖像和文本

鏈接到的jsfiddle：http://jsfiddle.net/xF6xV/2/

HTML：

<body>  
    <div id="header">   
      <h1>Test Text but it's not inside the actual div...</h1> 
    </div> 
    <div id="content"> 
     <div id="topcontent"> 
      <img src="http://www.curiousfix.com/wp-content/uploads/2013/06/only_god_forgives_xxlg-2000x2964.jpg" id="left" >      
      <img src="http://www.curiousfix.com/wp-content/uploads/2013/06/only_god_forgives_xxlg-2000x2964.jpg" id="right"/> 
      <img src="http://typographica.org/wp-content/uploads/2009/04/Lakside-styles-315x165.png" id="mid" /> 
     </div> 
     </br> 
     <div id="botcontent"> 
      <div class="slidercontainer">      
       <div id="area"> 
        <div id="knob"></div> 

       </div> 
      </div> 
     </div> 
    </div> 
    <div id="footer"> 
     <img src="http://www.duv-ev.de/images/Leiste_Impressum_511x127_rgb-srgb_72.jpg"/> 
    </div>

CSS：

body, 
html { 
    height: 98%; 
} 
#header { 
    height: 15.69%; 
    background-color: gray; 
    line-height: 15.69%; 
} 

#header h1{ 
    text-align: center; 
    color: white;  
    vertical-align: middle; 
} 

#content{ 
    height: 71.16%; 
    left:0; 
    margin-left: 15%; 
    margin-right: 15%; 
    right:0;  
} 
#topcontent{ 
    height:56.245%; 
} 

.slidercontainer{ 
    width: 100%; 
} 
#botcontent{ 
    height: 43.755%; 
} 

img { 
    max-height:100%; 
} 

#footer{ 
    text-align: center; 
    background-color: gray; 
    height: 13.15%; 
} 


#left{ 
    float:left; 
    margin-left: 10%; 
    max-width: 30%; 
} 

#right{ 
    float: right; 
    max-width: 30%; 
    margin-right:10%; 
} 
#mid{ 
    display: block; 
    margin-left: auto; 
    margin-right: auto; 
    max-width: 10%; 
} 

#area { 
    background: gray; 
    height:6em; 
    width: 100%; 
    border-radius: 1em; 
} 

#knob {  
    height: 6em; 
    width: 6em; 
    background: orange; 
    border-radius: 1em; 
}

來源

2014-02-19 Kazoooka

這可以b e鼓舞人心的：http://stackoverflow.com/questions/18516317/vertically-align-an-image-inside-a-div-with-responsive-height/18516474#18516474 –

在這裏你去

WORKING DEMO

CSS的變化：

#header h1 { 
    color: #FFFFFF; 
    display: inline-block; 
    text-align: center; 
    vertical-align: middle; 
    width: 100%; 
}

希望這有助於。

來源

2014-02-19 11:55:43 Nitesh

好吧，這將文本中的div，但如何垂直居中？ – Kazoooka

我個人使用3種方法，視使用情況而定。

FIDDLE

1）翻譯（）

2）行高

3）垂直對齊

<div id="div1"> 
    <img src="http://www.curiousfix.com/wp-content/uploads/2013/06/only_god_forgives_xxlg-2000x2964.jpg"/> 
</div> 
<div id="div2"> 
    <h1>Hello</h1> 
</div> 
<div id="div3"> 
      <img src="http://www.curiousfix.com/wp-content/uploads/2013/06/only_god_forgives_xxlg-2000x2964.jpg"/> 
</div>

#div1, #div2, #div3 { 
    display:block; 
    margin:20px auto; 
    width:400px; 
    height:200px; 
    background-color:#ccc; 
    text-align:center; 
    position:relative; 
} 
#div1 img { 
    height:100px; 
    position:absolute; 
    top:50%; 
    left:50%; 
    -webkit-transform:translateY(-50%) translateX(-50%); 
} 
#div2 h1 { 
    line-height:200px; 
} 
#div3 { 
    display:table-cell; 
    vertical-align:middle; 
} 
#div3 img { 
    height:100px; 
}

來源

2014-02-19 12:07:34

如何在CSS中垂直居中放置圖像和文本

回答

相關問題