[英]Make border-bottom span width of center aligned text
I want my p
text to have a dotted line beneath it that spans the width of the text, I would also like the p
to be centered horizontally. 我希望我的
p
文本在其下面有一条跨越文本宽度的虚线,我也希望p
在水平方向上居中。
The text never be longer than one line but it will vary in length on that line (if it was totally fixed, I could solve this easily). 文本永远不会长于一行,但它在该行上的长度会有所不同(如果它完全固定,我可以很容易地解决这个问题)。
I can't quite figure out the solution. 我无法弄清楚解决方案。 I have the following structure:
我有以下结构:
<div class="container">
<div class="content">
<p>This is the title</p>
</div>
</div>
In my CSS, I have something like this: 在我的CSS中,我有这样的事情:
.container {
width: 650px;
height: 100px;
}
.content {
text-align: center;
text-transform: uppercase;
font-size: 26px;
color: #4D4D4D;
}
p {
border-bottom: #808080;
border-bottom-width: thin;
border-bottom-style: dotted;
}
Here: http://jsfiddle.net/DqFp7/ 这里: http : //jsfiddle.net/DqFp7/
HTML HTML
<div class="container">
<div class="content">
<p>This is the title</p>
</div>
</div>
CSS CSS
.container {
width: 650px;
height: 100px;
}
.content {
text-align: center;
text-transform: uppercase;
font-size: 26px;
color: #4D4D4D;
}
p {
border-bottom: #808080;
border-bottom-width: thin;
border-bottom-style: dotted;
display:inline;
}
You can use text-decoration
couples with text-decoration-style
, although support for this feature is still somewhat poor (Aug-2018: Not supported in Safari and Edge). 尽管对此功能的支持仍然有些差(2018年8月:Safari和Edge不支持),但您可以使用
text-decoration
text-decoration-style
。
It's in the spec , so it will eventually be supported. 它符合规范 ,因此最终会得到支持。
. 。
Example: 例:
.container, .content { width: 100%; } .content p { font-size: 30px; text-decoration: underline; text-decoration-style: dotted; text-decoration-color: red; text-align: center; }
<div class="container"> <div class="content"> <p>This is the title</p> </div> </div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.