左邊，中間和右邊對齊的文本在同一行上

在下列情況下，是否可以在HTML/CSS的同一行上放置左對齊，居中和右對齊的文本？左邊，中間和右邊對齊的文本在同一行上

左邊和右邊的文字會短，但我不知道它們的長度。
文字的中心部分可能夠長。
文字的中心部分應顯示在中間。
文本的中心部分不應與左邊或右邊的文本重疊。

使用3個div的顯而易見的解決方案，其中兩個左右浮動的工作相當不錯，除了中間的一段文本沒有完全居中（例如，如果左側的文本長度超過右邊，中心出現在絕對中心的右邊）。

我只需要一個適用於WebKit的解決方案。有任何想法嗎？

編輯 - 這是我迄今爲止...

HTML：

<div id="left">Left</div> 
<div id="center">Center text</div> 
<div id="right">Right</div>

CSS：

#left { 
    float: left; 
    text-align: left; 
    padding-right: 10px; 
} 

#center { 
    text-align: center; 
} 

#right { 
    float: right; 
    text-align: right; 
    padding-left: 10px; 
}

來源

2011-12-15 Hilton Campbell

嗯沒有我只知道一個JS解決方案，你把左邊或右邊的寬度和使用它的另一面......只有居中的文本在exaclty中心。沒有寬度，你不能只做HTML和CSS ...你可以使用％寬度，如10％ - 80％ - 10％，但這是固定寬度，取決於容器 – ggzone 2011-12-15 16:14:09

你可以發佈你正在處理的代碼嗎？ – ptriek 2011-12-15 16:16:15

聽起來像是一張桌子的工作。究竟你想要放哪些數據？ – 2011-12-15 16:29:30

通過將文本從右側複製到左側欄，您需要「左右」左欄的右欄。爲什麼？當中間列需要包裝以保持整個表的中心時，它需要包裝，就好像其他列的寬度相同。你可以在這裏看到：http://jsfiddle.net/brettwp/n5eSB/通過調整Result面板的大小。請注意，由於隱藏的內容，這確實使您的表格變得更高。我不知道你實現的所有細節，所以你需要進行調整（溢出隱藏，負邊距，相對位置等），以使其適合頁面，但它應該讓你開始：

<table> 
    <tr> 
     <td class="d1"> 
      left 
      <div class="copy">right text</div> 
     </td> 
     <td class="d2"> 
      center text that is long enough to force a word wrap! 
     </td> 
     <td class="d3">right text</td> 
    </tr> 
</table> 

table { 
    width: 100%; 
} 
td { 
    vertical-align: top; 
} 
.d1 { 
    text-align: left; 
} 
.d2 { 
    text-align:center; 
} 
.d3 { 
    text-align:right; 
} 
.copy { 
    visibility: hidden; 
} 
.copy, .d3 { 
    white-space: nowrap; 
}

來源

2011-12-15 21:10:19

可以與顯示器實現這一點：表（ -row/cell）性質：

http://jsfiddle.net/WYxek/

<div class="table"> 
    <div class="tr"> 
     <div class="d1">left text</div> 
     <div class="d2">center text</div> 
     <div class="d3">right text</div> 
    </div> 
</div> 



.table { 
    display:table; 
    width:100%; 
} 
.tr { 
    display:table-row; 
} 
.d1 { 
    display:table-cell; 
    width:25%; 
} 
.d2 { 
    display:table-cell; 
    text-align:center; 
    width:50%; 
} 
.d3 { 
    display:table-cell; 
    text-align:right; 
    width:25%; 
}

來源

2011-12-15 16:24:03 ptriek

解決方案有明確的div

https://jsfiddle.net/LaL92q88/1/

<div style="float: left">Left Text</div> 
<div style="float: right">Right Text</div> 
<div style="margin: 0 auto; width: 100px;">Centered Text</div>

來源

2015-06-06 12:10:15 razon

左邊，中間和右邊對齊的文本在同一行上

回答

相關問題