图片显示了我想要实现的目标。能做到吗?
要居中,而不将某些东西放在左侧部分,请参见此处:How do I center float elements?
最佳答案
是的!如果您小心行事,这可以通过绝对定位来实现。
首先,制作一个包装器 <div>
,文本居中<div>
,包含一个子项(左侧)<div>
.
<div class='wrapper'>
<div class='centered'>
This text is horizontally centered.
<div class='left'>
This text is to the left of the centered text.
</div>
</div>
</div>
然后,设置 text-align
包装器的 center
:
.wrapper {
text-align: center;
}
设置居中文本display: inline-block
和position: relative
:
.centered {
display: inline-block;
position: relative;
}
最后,将左侧文本绝对定位为 right: 100%
:
.left {
position: absolute;
right: 100%;
width: 100px;
top: 0;
}
这是 JSFiddle:http://jsfiddle.net/jeremyblalock/28q08auq/1/
关于css -- 在居中元素的左侧放置一些东西?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28358595/