左边，中间和右边对齐的文本在同一行上

在下列情况下，是否可以在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

左边，中间和右边对齐的文本在同一行上

回答

相关问题