Question

嘿我正在尝试将文本对齐，但在文本的顶部我想要另一个文本，但在中心，在span标记内..代码在下面

HTML：

<p><span>Hello world,</span>Here is my long text, about 100 lines</p> <!-- This must be justified-->

的CSS：

p {
    text-align: justify;
}

span {
    text-align: center;
}

Answer 1

您需要将span元素设置为display: block;，以便您在此元素上声明的text-align: center;规则可以获得您期望的效果。

＆＃13;

span {
  display: block;
  text-align: center;
}

p {
  text-align: justify;
}

＆＃13;

<p><span>Hello world,</span>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

＆＃13;

最好将span更改为p，因为它已经是一个块元素，然后您可以单独定位相应的p标记并应用所需的{{1}相应的规则。

Answer 2

这听起来像你应该使用标题而不是跨度但是flexbox可以做到这一点。

＆＃13;

p {
  text-align: justify;
  display: flex;
  flex-wrap: wrap;
  width: 80%;
  margin: 1em auto;
  border: 1px solid grey
}
span {
  text-align: center;
  width: 100%;
}

＆＃13;

<p><span>Hello world,</span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto unde cum, quis vero consequuntur temporibus nisi a voluptatum repudiandae sequi aliquid adipisci eum, quae libero autem ducimus commodi ab officiis nesciunt tempore!
  Dicta quos, assumenda modi totam rem accusantium odio fuga consequatur sunt minus asperiores, corrupti corporis labore reiciendis animi.</p>

＆＃13;

更加语义化。

＆＃13;

* {
  margin: 0;
}
div {
  text-align: justify;
  flex-wrap: wrap;
  width: 80%;
  margin: 1em auto;
  border: 1px solid grey
}
h4 {
  text-align: center;
  width: 100%;
  font-weight: normal;
}

＆＃13;

<div>
  <h4>Hello world</h4>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto unde cum, quis vero consequuntur temporibus nisi a voluptatum repudiandae sequi aliquid adipisci eum, quae libero autem ducimus commodi ab officiis nesciunt tempore! Dicta quos, assumenda
    modi totam rem accusantium odio fuga consequatur sunt minus asperiores, corrupti corporis labore reiciendis animi.</p>
</div>

＆＃13;

Answer 3

只是为了测试，你也可以使用flex;

＆＃13;

.container {
   display: flex;
   flex-direction: column;
   width: 400px;
}  

.container p {
  width: 400px;
}  
  
.container span {
  align-self: center;
}

＆＃13;

<div class="container">
  <span>Lorem ipsum dolor sit amen, neato</span>
  <p> 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla gravida ac ex vel tempor. Integer eget rutrum lorem. In accumsan rutrum mauris quis porttitor. In hac habitasse platea dictumst. Fusce vulputate feugiat viverra. Sed ac commodo purus, sed sollicitudin ex. Cras a mattis risus, vel accumsan augue. Maecenas odio erat, auctor maximus lorem nec, euismod auctor sem. Etiam ac vestibulum justo, eget vestibulum tellus.


  </p>  
</div>

＆＃13;

你可能永远不应该使用这个解决方案，因为你可能只是使用text-align属性，但flex非常喜欢做这样的事情。需要注意的是align-self与最近的 flex相关，而不是p元素，因为它没有display: flex;。

如何在<p>中居中<span>

3 个答案: