使用CSS,容易使用text-align：center ;.将文本水平居中放置在容器中,但如果该文本的任何单词大于容器的宽度,浏览器将自动“剪辑”到容器的左边界(如,超大小的字符与太小容器的左侧对齐,并且没有CSS单词：连字符;属性设置(或类似的),超大小的单词突出超过右侧边缘容器.
任何方式浮动我的文本左边的这张照片,以节省垂直空间？好吧.无论如何…
没有使用儿童容器元素来保存文本,是否有一种方法可以使超大字体居中,以便它能同时挂在容器的左右两侧？
再次,我不想在容器内使用文本容器.我可以在5秒钟内使用一个小孩< div>文本居中< / div>具有固定宽度和负边距左,或者将容器元素绝对定位在相对div内,但是我正在寻找一个CSS属性,即使在文字太长而不适合宽度的情况下也会使文本居中.默认情况下,text-align：center不执行此操作.
思考？谢谢！ -Slink
解决方法
This fiddle显示了三个div元素,说明了“问题”和以下“解决方案”.
一个可能的解决方案
我不确定你的需要,但到目前为止,我发现唯一真正的解决方案是将display：table设置为文本容器.但是,这将允许容器拉伸到所需的宽度以包含最长的单词,这可能不适合您.如果没关系,那是最好的解决办法.
另一个可能的“假”解决方案
如果你必须至少保持元素的大小,那么你可以通过一些创造性的伪元素来伪造外观：
.fakeIt {
text-align: center; /* what you wanted all along */
display: table; /* key to get centered */
position: relative; /* allow reference for absolute element */
z-index: 2; /* set up for a background to be pushed below */
width: 40px; /* what you want,but table resizes larger if needed*/
border: none; /* transferring border to the "fake" */
background-color: transparent; /* transferring background to the "fake" */
}
.fakeIt:after {
content: ''; /* before or after need it,even if empty */
width: 40px; /* the original width you wanted for the container */
position: absolute; /* need this to position it */
z-index: -1; /* push it behind the foreground */
left: 50%; /* push it to center */
top:0; /* give it height */
bottom: 0; /* give it height */
margin-left: -20px; /* half the width to finish centering */
border: 1px solid red; /* the border you wanted on the container */
background-color: yellow; /* the background you wanted on the container */
}
但是,根据您的具体应用,“伪造”解决方案可能无法正常工作.此外,原始元素仍然占据文档中更广泛的“空间”,它看起来不会像这样.这可能会导致问题.容器上的负余量可以解决这个问题,但是您不知道需要设置什么值,因为它与文本宽度会有所不同.
你在评论中提到你不熟悉css中的伪元素,所以你可能是want to have a quick intro.
