無法在表格單元格中垂直居中文本

我正在使用HTML和CSS爲學校項目創建網站。在標題中有一個表格，我需要一個文本（位於單元格內）在垂直中心和水平右側對齊。無法在表格單元格中垂直居中文本

這是HTML代碼

<table id="intestazione"> 
........ 
    <tr> 
     <td class="centerV"><h1>Text</h1></td> 
     <td><img src="Logo.jpg"></td> 
    </tr> 
</table>

，這是CSS代碼

h1 
{ 
    font-family:Arial; 
    font-size:50px; 
    color:#009ED9; 
    text-align:right; 
} 
.centerV 
{ 
    display:table-cell; 
    vertical-align:middle; 
}

但我想這是行不通的，所以我改變CSS代碼插入到

h1 
{ 
    font-family:Arial; 
    font-size:50px; 
    color:#009ED9; 

    display:table-cell; 
    vertical-align:middle; 
    text-align:right; 
}

並且文本垂直居中，但不在右側（它位於左側）。我讀過，我可以在頂部使用line-height或padding，但在我看來，使用vertical-align（告訴我是否我錯了）會更乾淨優雅。

我也嘗試了其他代碼從網絡上的建議，但我不寫，否則問題會太長。

來源

2017-04-01 mara6399

你要水平對齊的權利？因爲你提到「正確」和「左」。垂直交易「頂」，「buttom」，「中」 – repzero

@repzero我需要一個水平對齊的「中間」 – mara6399

@ mara6399答案發布 – repzero

你可以使用：位置：親屬; right：value％; （或左：值％）只要你喜歡..

check this

<table id="intestazione" border="1"> 
<tr> 
    <td class="centerV"><h1>Text</h1></td> 
    <td><img src="http://www.sec4ever.com/home/images/misc/noavatar.gif"></td> 


</tr>

h1{ 
font-family:Arial; 
font-size:50px; 
color:#009ED9; 
display:table-cell; 
padding:100px; 
vertical-align:middle; 
position:relative; 
right:30%; }

來源

2017-04-01 15:59:52

從h1標題中取出display:table-cell標題，並簡單地將text-align:right應用於您的td元素。

h1 { 
 
    font-family: Arial; 
 
    font-size: 50px; 
 
    color: #009ED9; 
 
    text-align: right; 
 
} 
 

 
.centerV { 
 
    vertical-align: middle; 
 
} 
 

 
tr { 
 
    border: solid red; 
 
} 
 

 
td { 
 
    border: solid green; 
 
    width: 100%; 
 
} 
 

 
h1 { 
 
    font-family: Arial; 
 
    font-size: 50px; 
 
    color: #009ED9; 
 
    vertical-align: middle; 
 
    text-align: right; 
 
} 
 

 
h1 { 
 
    border: solid red; 
 
} 
 

 
table { 
 
    text-align: right; 
 
}

<table id="intestazione"> 
 
    ........ 
 
    <tr> 
 
    <td class="centerV"> 
 
     <h1>Text</h1> 
 
    </td> 
 
    <td><img src="Logo.jpg"></td> 
 
    </tr> 
 
</table>

來源

2017-04-01 15:50:09 repzero

試試這個

h1 { 
    font-family:Arial; 
    font-size:50px; 
    color:#085ED9; 
    display:table-cell; 
    vertical-align:middle; 
    float: right; 
}

來源

2017-04-01 15:53:08

您可以通過默認內容td使用align="right"在td垂直對齊。

<table id="intestazione" width="100%" bgcolor="green"> 
 
    <tr> 
 
     <td align="right" valign="middle" ><h1>Text</h1></td> 
 
     <td><img src="Logo.jpg"></td> 
 
    </tr> 
 
</table>

來源

2017-04-01 16:14:13 aje

我也試過這個，但它沒有'噸工作...感謝無論如何:) – mara6399

無法在表格單元格中垂直居中文本

回答

相關問題