gpt4 book ai didi

html - 单行居中,多行不居中

转载 作者:搜寻专家 更新时间:2023-10-31 08:21:01 25 4
gpt4 key购买 nike

是否可以水平居中对齐一些文本,如果它适合单行,但不要居中对齐,如果占据多行则执行 white-space: normal(最好,但是不一定,没有 javascript)?

最佳答案

这是一个 HTML+CSS 的解决方案。

技巧是:

  1. <span>里面<p>display: inline-box;属性,因此它将缩小到其内容的大小。

  2. <p>text-align: center所以 <span> 如果 <span> 的大小将居中小于 <p> 的宽度.

  3. <span>text-align: left所以文本实际上是左对齐的。

<!DOCTYPE html> <html>
<head>
<title>Center</title>
<style type="text/css">
.big-box {
text-align: center;
width: 40em;
border: 1px solid red;
}
.center-if-single-line {
text-align: left;
display: inline-block;
border: 1px solid blue;
}
</style>
</head>
<body>
<div>
<h1>Small</h1>
<p class="big-box">
<span class="center-if-single-line">
All your line are belong to us!
</span>
</p>
<h1>Big</h1>
<p class="big-box">
<span class="center-if-single-line">
All your line are belong to us!
All your line are belong to us!
All your line are belong to us!
All your line are belong to us!
All your line are belong to us!
All your line are belong to us!
All your line are belong to us!
All your line are belong to us!
All your line are belong to us!
All your line are belong to us!
All your line are belong to us!
All your line are belong to us!
All your line are belong to us!
All your line are belong to us!
All your line are belong to us!
</span>
</p>
</div>
</body>
</html>

关于html - 单行居中,多行不居中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9755180/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com