1. 首頁
  2. 問答
  3. 如何在不改變div大小的情況下垂直對齊文本中的文本

如何在不改變div大小的情況下垂直對齊文本中的文本

2016-11-14 17 views
1

我需要在左邊框中將文本「Hello world」製作爲（垂直）中間。如何在不改變div大小的情況下垂直對齊文本中的文本

如果我更改CSS

.red-banner .text { background: rgb(32,56,100); color: white; padding-top:8px; }

隨後的「Hello world」將被一點點往下移，但黑色的背景也將被轉移和重疊的旗幟之下。
hello world

所以，我怎麼能對準盒垂直中間內的文本而不改變黑色背景的大小？ （文本內容最多2行）。

#parent { 
 
    overflow: hidden; 
 
    margin:0px; 
 
} 
 

 
.right { 
 
    border-left: 2px solid; 
 
    border-color: rgb(215,217,216); 
 
    padding-left: 20px; 
 
    float: right; 
 
    width: 270px; 
 
} 
 

 
.left { 
 
    margin: 0px; 
 
    overflow: hidden; 
 
    height: 100%; 
 
} 
 

 
body { 
 
    margin:0px; 
 
    font-family: Calibri; 
 
} 
 

 
header20 { 
 
    font-size: 16pt; 
 
} 
 

 
#inner { 
 
    margin-left: 10px; 
 
    width:730px; 
 
    margin: 0 auto; 
 
} 
 

 
.banner { 
 
    position: relative; 
 
} 
 

 
.banner .text { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    width: 250px; 
 
    height: 100%; 
 
    display: none; 
 
} 
 

 
.banner:hover .text { 
 
    display: block; 
 
} 
 

 
.red-banner .text { 
 
    background: rgb(32,56,100); 
 
    color: white; 
 
} 
 

 
.green-banner .text { 
 
    background: green; 
 
}
<div id="parent" class="row"> 
 
    <div class="right"> 
 
     <br>  
 
     <div class="banner red-banner"> 
 
      <img src="http://dbclipart.com/wp-content/uploads/2016/03/Red-banner-clipart-image-1.png" style='width:250px;height:50px'> 
 
      <div class="text"> 
 
      Hello world. 
 
      </div> 
 
     </div> 
 
     
 
     <br> 
 
     
 
     <div class="banner green-banner"> 
 
      <img src="http://images.clipartpanda.com/banner-20clipart-normal_1283818525.jpg" style='width:250px;height:50px'> 
 
      <div class="text"> 
 
      Hello world, this is a test message for the effect. 
 
      </div> 
 
     </div> 
 
     
 
     <br> 
 
     <table style='width:250px;background-color:rgb(211,238,208)'> 
 
     <tr> 
 
      <td> 
 
      <header20><span style='color:rgb(17,56,96)'><b>This is a table</b></span></header20> 
 
      <ul style='padding-left:25px;margin-top:0px;magrin-bottom:0px'> 
 
       <li>First point</li> 
 
       <li>Second point</li> 
 
       <li>Third point</li> 
 
      </ul> 
 
      </td> 
 
     </tr> 
 
     </table> 
 
     <br> 
 
     <table style='width:250px;background-color:rgb(211,238,208)'> 
 
     <tr> 
 
      <td> 
 
      <header20><span style='color:rgb(17,56,96)'><b>This is another table</b></span></header20> 
 
      <ul style='padding-left:25px;margin-top:0px;magrin-bottom:0px'> 
 
       <li>First point</li> 
 
       <li>Second point</li> 
 
       <li>Third point</li> 
 
      </ul> 
 
      </td> 
 
     </tr> 
 
     </table> 
 
     <br> 
 
    </div> 
 

 
    <div class="left"> 
 
     <div id="inner"> 
 
      <br> 
 
      <img src="smallpic.png" style='float:left;margin:0.1cm;width:85px;height:85px'> 
 
      <p style='margin-left:2cm;font-size:22.0pt;margin-top:6pt;color:rgb(0,56,96)'><b>This is the title of the page - bla bla bla <br>Timetable for the next month</b></p> 
 
      <p style='margin-left:1cm'> The first line of the content</p> 
 
      <p style='margin-left:1cm'> The second line of the content</p> 
 
      <p style='margin-left:1cm'> The third line of the content</p> 
 
      <br> 
 
     </div> \t \t \t 
 
\t \t \t 
 
     <table align='center'> 
 
     <tr> 
 
      <td style='padding-right:25px'><img src="pic1.png" style='width:140px;height:115px'/></td> 
 
      <td style ='padding-left:25px;padding-right:25px'><img src="pic2.png" style='width:140px;height:115px'/></td> 
 
      <td style ='padding-left:25px'><img src="pic3.png" style='width:140px;height:115px'/></td> 
 
     </tr> 
 
     </table> 
 
    </div> 
 
</div>

來源

2016-11-14 htmlamateur

+2

使用'線height'，而不是填充，並設置其與母公司 –

回答

2

選項1：對齊使用Flexbox的

應用display: flex;屬性爲.text到麥克Ë它Flexbox的容器，

  • 使用justify-content到水平對齊內容。
  • 使用align-items至垂直對齊內容。

看一看下面的代碼片段：

#parent { 
 
    overflow: hidden; 
 
    margin:0px; 
 
} 
 

 
.right { 
 
    border-left: 2px solid; 
 
    border-color: rgb(215,217,216); 
 
    padding-left: 20px; 
 
    float: right; 
 
    width: 270px; 
 
} 
 

 
.left { 
 
    margin: 0px; 
 
    overflow: hidden; 
 
    height: 100%; 
 
} 
 

 
body { 
 
    margin:0px; 
 
    font-family: Calibri; 
 
} 
 

 
header20 { 
 
    font-size: 16pt; 
 
} 
 

 
#inner { 
 
    margin-left: 10px; 
 
    width:730px; 
 
    margin: 0 auto; 
 
} 
 

 
.row { 
 
    display: flex; 
 
} 
 

 
.banner { 
 
    position: relative; 
 
} 
 

 
.banner .text { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    width: 250px; 
 
    height: 100%; 
 
    display: none; 
 
} 
 

 
.banner:hover .text { 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
} 
 

 
.red-banner .text { 
 
    background: rgb(32,56,100); 
 
    color: white; 
 
} 
 

 
.green-banner .text { 
 
    background: green; 
 
}
<div id="parent" class="row"> 
 
    <div class="right"> 
 
     <br>  
 
     <div class="banner red-banner"> 
 
      <img src="http://dbclipart.com/wp-content/uploads/2016/03/Red-banner-clipart-image-1.png" style='width:250px;height:50px'> 
 
      <div class="text"> 
 
      Hello world. 
 
      </div> 
 
     </div> 
 
     
 
     <br> 
 
     
 
     <div class="banner green-banner"> 
 
      <img src="http://images.clipartpanda.com/banner-20clipart-normal_1283818525.jpg" style='width:250px;height:50px'> 
 
      <div class="text"> 
 
      Hello world, this is a test message for the effect. 
 
      </div> 
 
     </div> 
 
     
 
     <br> 
 
     <table style='width:250px;background-color:rgb(211,238,208)'> 
 
     <tr> 
 
      <td> 
 
      <header20><span style='color:rgb(17,56,96)'><b>This is a table</b></span></header20> 
 
      <ul style='padding-left:25px;margin-top:0px;magrin-bottom:0px'> 
 
       <li>First point</li> 
 
       <li>Second point</li> 
 
       <li>Third point</li> 
 
      </ul> 
 
      </td> 
 
     </tr> 
 
     </table> 
 
     <br> 
 
     <table style='width:250px;background-color:rgb(211,238,208)'> 
 
     <tr> 
 
      <td> 
 
      <header20><span style='color:rgb(17,56,96)'><b>This is another table</b></span></header20> 
 
      <ul style='padding-left:25px;margin-top:0px;magrin-bottom:0px'> 
 
       <li>First point</li> 
 
       <li>Second point</li> 
 
       <li>Third point</li> 
 
      </ul> 
 
      </td> 
 
     </tr> 
 
     </table> 
 
     <br> 
 
    </div> 
 

 
    <div class="left"> 
 
     <div id="inner"> 
 
      <br> 
 
      <img src="smallpic.png" style='float:left;margin:0.1cm;width:85px;height:85px'> 
 
      <p style='margin-left:2cm;font-size:22.0pt;margin-top:6pt;color:rgb(0,56,96)'><b>This is the title of the page - bla bla bla <br>Timetable for the next month</b></p> 
 
      <p style='margin-left:1cm'> The first line of the content</p> 
 
      <p style='margin-left:1cm'> The second line of the content</p> 
 
      <p style='margin-left:1cm'> The third line of the content</p> 
 
      <br> 
 
     </div> \t \t \t 
 
\t \t \t 
 
     <table align='center'> 
 
     <tr> 
 
      <td style='padding-right:25px'><img src="pic1.png" style='width:140px;height:115px'/></td> 
 
      <td style ='padding-left:25px;padding-right:25px'><img src="pic2.png" style='width:140px;height:115px'/></td> 
 
      <td style ='padding-left:25px'><img src="pic3.png" style='width:140px;height:115px'/></td> 
 
     </tr> 
 
     </table> 
 
    </div> 
 
</div>

選項2：對齊使用表&表單元格

您可以使用display: table。但對於這一點，你必須改變你的HTML結構一點點，像：

<div class="text table"> <!-- display: table --> 
    <div class="table-cell"> <!-- display: table-cell --> 
    Hello World 
    </div> 
</div>

然後.table-cell元素上使用vertical-align: middle & text-align: center。看看下面的代碼片段：

#parent { 
 
    overflow: hidden; 
 
    margin:0px; 
 
} 
 

 
.right { 
 
    border-left: 2px solid; 
 
    border-color: rgb(215,217,216); 
 
    padding-left: 20px; 
 
    float: right; 
 
    width: 270px; 
 
} 
 

 
.left { 
 
    margin: 0px; 
 
    overflow: hidden; 
 
    height: 100%; 
 
} 
 

 
body { 
 
    margin:0px; 
 
    font-family: Calibri; 
 
} 
 

 
header20 { 
 
    font-size: 16pt; 
 
} 
 

 
#inner { 
 
    margin-left: 10px; 
 
    width:730px; 
 
    margin: 0 auto; 
 
} 
 

 
.row { 
 
    display: flex; 
 
} 
 

 
.banner { 
 
    position: relative; 
 
} 
 

 
.banner .text { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    width: 250px; 
 
    height: 100%; 
 
    display: none; 
 
} 
 

 
.banner:hover .text.table { 
 
    display: table; 
 
    height: 50px; 
 
} 
 

 
.banner:hover .text.table .table-cell { 
 
    display: table-cell; 
 
    vertical-align: middle; 
 
    text-align: center; 
 
} 
 

 
.red-banner .text { 
 
    background: rgb(32,56,100); 
 
    color: white; 
 
} 
 

 
.green-banner .text { 
 
    background: green; 
 
}
<div id="parent" class="row"> 
 
    <div class="right"> 
 
     <br>  
 
     <div class="banner red-banner"> 
 
      <img src="http://dbclipart.com/wp-content/uploads/2016/03/Red-banner-clipart-image-1.png" style='width:250px;height:50px'> 
 
      <div class="text table"> 
 
      <div class="table-cell"> 
 
       Hello world. 
 
      </div> 
 
      </div> 
 
     </div> 
 
     
 
     <br> 
 
     
 
     <div class="banner green-banner"> 
 
      <img src="http://images.clipartpanda.com/banner-20clipart-normal_1283818525.jpg" style='width:250px;height:50px'> 
 
      <div class="text table"> 
 
      <div class="table-cell"> 
 
      Hello world, this is a test message for the effect. 
 
       </div> 
 
      </div> 
 
     </div> 
 
     
 
     <br> 
 
     <table style='width:250px;background-color:rgb(211,238,208)'> 
 
     <tr> 
 
      <td> 
 
      <header20><span style='color:rgb(17,56,96)'><b>This is a table</b></span></header20> 
 
      <ul style='padding-left:25px;margin-top:0px;magrin-bottom:0px'> 
 
       <li>First point</li> 
 
       <li>Second point</li> 
 
       <li>Third point</li> 
 
      </ul> 
 
      </td> 
 
     </tr> 
 
     </table> 
 
     <br> 
 
     <table style='width:250px;background-color:rgb(211,238,208)'> 
 
     <tr> 
 
      <td> 
 
      <header20><span style='color:rgb(17,56,96)'><b>This is another table</b></span></header20> 
 
      <ul style='padding-left:25px;margin-top:0px;magrin-bottom:0px'> 
 
       <li>First point</li> 
 
       <li>Second point</li> 
 
       <li>Third point</li> 
 
      </ul> 
 
      </td> 
 
     </tr> 
 
     </table> 
 
     <br> 
 
    </div> 
 

 
    <div class="left"> 
 
     <div id="inner"> 
 
      <br> 
 
      <img src="smallpic.png" style='float:left;margin:0.1cm;width:85px;height:85px'> 
 
      <p style='margin-left:2cm;font-size:22.0pt;margin-top:6pt;color:rgb(0,56,96)'><b>This is the title of the page - bla bla bla <br>Timetable for the next month</b></p> 
 
      <p style='margin-left:1cm'> The first line of the content</p> 
 
      <p style='margin-left:1cm'> The second line of the content</p> 
 
      <p style='margin-left:1cm'> The third line of the content</p> 
 
      <br> 
 
     </div> \t \t \t 
 
\t \t \t 
 
     <table align='center'> 
 
     <tr> 
 
      <td style='padding-right:25px'><img src="pic1.png" style='width:140px;height:115px'/></td> 
 
      <td style ='padding-left:25px;padding-right:25px'><img src="pic2.png" style='width:140px;height:115px'/></td> 
 
      <td style ='padding-left:25px'><img src="pic3.png" style='width:140px;height:115px'/></td> 
 
     </tr> 
 
     </table> 
 
    </div> 
 
</div>

希望這有助於！

來源

2016-11-14 10:00:42

+0

感謝Saurav的高度相同，你的想法是清楚的。實際上，我已經使用了'flex'，但它不起作用:(對不起，我不應該在CSS中將'.row {0}顯示：flex; }'發佈到我的問題中，因爲它不起作用。如果我自己的瀏覽器不支持flex，你還有其他解決方案嗎？ – htmlamateur

+0

@htmlamateur我在回答的下一部分使用了'display：table'＆'display：table-cell'。有兩個選項'flex'（已經在答案中）和'table'（我已經在flex之後添加過了）看看更新後的答案 –

+0

非常感謝Saurav。你的解決方案非常棒！ ） 祝你今天愉快！ – htmlamateur

2

在文本類嘗試下面的CSS

text-align: center;

對齊文本

來源

2016-11-14 09:59:34 Lin0

2

要對齊項目垂直的Flex盒是最好的主意，老和各種小竅門可以做的工作，但你的佈局必須是實心的設計和靈活的， 因此，一個使用柔性盒是必要的： 首先我們改變顯示父項：

diplay:flex

然後我們使用：

justify-content:center to center item horizontally ,

和用於垂直取向，我們使用：

align-item :center

既然你說過你不能使用Flex; 有另一種方式利用line-height

.banner:hover .text 
    display: block; 
    text-align: center; 
    line-height: 50px; 


#parent { 
 
    overflow: hidden; 
 
    margin:0px; 
 
} 
 

 
.right { 
 
    border-left: 2px solid; 
 
    border-color: rgb(215,217,216); 
 
    padding-left: 20px; 
 
    float: right; 
 
    width: 270px; 
 
} 
 

 
.left { 
 
    margin: 0px; 
 
    overflow: hidden; 
 
    height: 100%; 
 
} 
 

 
body { 
 
    margin:0px; 
 
    font-family: Calibri; 
 
} 
 

 
header20 { 
 
    font-size: 16pt; 
 
} 
 

 
#inner { 
 
    margin-left: 10px; 
 
    width:730px; 
 
    margin: 0 auto; 
 
} 
 

 
.row { 
 
    display: flex; 
 
} 
 

 
.banner { 
 
    position: relative; 
 
} 
 

 
.banner .text { 
 
    position: flex; 
 
    top: 0; 
 
    left: 0; 
 
    width: 250px; 
 
    height: 100%; 
 
    display: none; 
 
} 
 

 
.banner:hover .text { 
 
    display: flex; 
 
} 
 

 
.red-banner .text { 
 
    background: rgb(32,56,100); 
 
    color: white; 
 
    display:flex; 
 
    justify-content:center; 
 
    align-items:center; 
 
} 
 

 
.green-banner .text { 
 
    background: green; 
 
}
<div id="parent" class="row"> 
 
    <div class="right"> 
 
     <br>  
 
     <div class="banner red-banner"> 
 
      <img src="http://dbclipart.com/wp-content/uploads/2016/03/Red-banner-clipart-image-1.png" style='width:250px;height:50px'> 
 
      <div class="text"> 
 
      Hello world. 
 
      </div> 
 
     </div> 
 
     
 
     <br> 
 
     
 
     <div class="banner green-banner"> 
 
      <img src="http://images.clipartpanda.com/banner-20clipart-normal_1283818525.jpg" style='width:250px;height:50px'> 
 
      <div class="text"> 
 
      Hello world, this is a test message for the effect. 
 
      </div> 
 
     </div> 
 
     
 
     <br> 
 
     <table style='width:250px;background-color:rgb(211,238,208)'> 
 
     <tr> 
 
      <td> 
 
      <header20><span style='color:rgb(17,56,96)'><b>This is a table</b></span></header20> 
 
      <ul style='padding-left:25px;margin-top:0px;magrin-bottom:0px'> 
 
       <li>First point</li> 
 
       <li>Second point</li> 
 
       <li>Third point</li> 
 
      </ul> 
 
      </td> 
 
     </tr> 
 
     </table> 
 
     <br> 
 
     <table style='width:250px;background-color:rgb(211,238,208)'> 
 
     <tr> 
 
      <td> 
 
      <header20><span style='color:rgb(17,56,96)'><b>This is another table</b></span></header20> 
 
      <ul style='padding-left:25px;margin-top:0px;magrin-bottom:0px'> 
 
       <li>First point</li> 
 
       <li>Second point</li> 
 
       <li>Third point</li> 
 
      </ul> 
 
      </td> 
 
     </tr> 
 
     </table> 
 
     <br> 
 
    </div> 
 

 
    <div class="left"> 
 
     <div id="inner"> 
 
      <br> 
 
      <img src="smallpic.png" style='float:left;margin:0.1cm;width:85px;height:85px'> 
 
      <p style='margin-left:2cm;font-size:22.0pt;margin-top:6pt;color:rgb(0,56,96)'><b>This is the title of the page - bla bla bla <br>Timetable for the next month</b></p> 
 
      <p style='margin-left:1cm'> The first line of the content</p> 
 
      <p style='margin-left:1cm'> The second line of the content</p> 
 
      <p style='margin-left:1cm'> The third line of the content</p> 
 
      <br> 
 
     </div> \t \t \t 
 
\t \t \t 
 
     <table align='center'> 
 
     <tr> 
 
      <td style='padding-right:25px'><img src="pic1.png" style='width:140px;height:115px'/></td> 
 
      <td style ='padding-left:25px;padding-right:25px'><img src="pic2.png" style='width:140px;height:115px'/></td> 
 
      <td style ='padding-left:25px'><img src="pic3.png" style='width:140px;height:115px'/></td> 
 
     </tr> 
 
     </table> 
 
    </div> 
 
</div>

來源

2016-11-14 11:33:08

+0

謝謝。你的想法和Saurav的想法一樣。然而，'flex'不適用於我的瀏覽器:(對不起，我不應該在我的問題中發佈.row {display：flex;}在CSS中，因爲它沒有工作。你有另一種解決方案嗎？ – htmlamateur

+0

我明白，你現在可以檢查更新 –

+0

謝謝，如果我使用'line-height'，那麼文本的第二行就會被剪切（文本的內容可能在2行），我接受了Saurav的解決方案，anw，I upvoted for you。再次感謝！ – htmlamateur

2

自動換行裏面需要這樣的div爲中心。希望它能幫助你。

<div class="text"> 
    <div class="custom-trow"> 
     <div class="custom-tcell"> 
      Hello world. 
     </div> 
    </div> 
</div>

，並應用以下CSS規則。

.custom-trow { 
    display: table; 
    height: 100%; 
    width: 100%; 
    vertical-align: middle; 
} 

.custom-tcell { 
    display: table-cell; 
    vertical-align: middle; 
    text-align: center; 
}

來源

2016-11-14 11:51:39

相關問題

 相關問題