如何在 CSS 中将两个文本列居中。

Posted 2023-03-29

【中文标题】如何在 CSS 中将两个文本列居中。

【英文标题】：How to center two text columns in CSS.

【发布时间】：2018-01-11 02:08:10

【问题描述】：

我在将这两个文本列居中时遇到问题，以便它们彼此并排，任何人都可以帮助我解决这个问题，我之前通过手动设置填充和边距来设法做到这一点，但我当然希望它能够工作在所有格式上。

这是css的代码（我已经删除了大部分没用的css，但我不知道该用什么。）

.AboutBA 
text-align: justify;
position: relative;
display:inline;


.Position 
text-align: justify;
display: inline;

这里是html

<div class="container">

<div class="AboutBA">
<h3>About BrandAmb</h3>
<p><i>BrandAmb</i> is a Danish marketing company  whose<br/> goal mission is to help both Danish and foreign<br/> brands expand their brand in Scandinavia through<br/> social marketing. By analyzing and studying your<br/> brand and the audience that you are trying to reach<br/> we, through our database of ambassadors, connects<br/> your brand with one or several of our brandambassadors.<br/> By using their broad platform our brandambassadors<br/> will help your brand reach the audience that is at target<br/> and get your brand the recognition that it deservs in<br/> Scandinavia. <a href="About-us.html">Read more about us.</a></p>
</div>

<div class="Position">
<h3>Our position</h3>
<p>When it comes to our position between your brand and<br/> our brandambassors we can have two potions depening<br/> on what your seeking as a brand. The first position is<br/> merely as an intermediary between your brand and our<br/> ambassadors. That means that we create and find the<br/> right connection and make sure it's a match, but the<br/> rest is up to you. Our second position is more hands-on.<br/> By using our cultural knowledge we can, if requested,<br/> help make a stragegy to fit excactly your targeted<br/> audiance in the Scandinavian market. Furthermore we<br/> help with communication between the two parties so any<br/> cultural or communication barriers are avoided.<br/><a href="products.html">Read about our products.</a></p>
</div>
</div>

提前谢谢

问候克里斯托弗

【问题讨论】：

为什么不给这两个元素添加一个公共类并displayinline-block，同时设置vertical-align: top 和width？

【参考方案1】：

这适用于非响应式网站。如果您希望它具有响应性，您可以使用一些媒体查询来修改它或使用响应式框架（例如基础）来定义不同视口大小的宽度，例如 large-6 / medium-6 / small-12 等

.container 
  width:auto;
  margin:0 auto;

.content 
  width:50%;
  float:left;
  text-align:center;

<div class="container">

<div class="AboutBA content">
<h3>About BrandAmb</h3>
<p><i>BrandAmb</i> is a Danish marketing company  whose<br/> goal mission is to help both Danish and foreign<br/> brands expand their brand in Scandinavia through<br/> social marketing. By analyzing and studying your<br/> brand and the audience that you are trying to reach<br/> we, through our database of ambassadors, connects<br/> your brand with one or several of our brandambassadors.<br/> By using their broad platform our brandambassadors<br/> will help your brand reach the audience that is at target<br/> and get your brand the recognition that it deservs in<br/> Scandinavia. <a href="About-us.html">Read more about us.</a></p>
</div>

<div class="Position content">
<h3>Our position</h3>
<p>When it comes to our position between your brand and<br/> our brandambassors we can have two potions depening<br/> on what your seeking as a brand. The first position is<br/> merely as an intermediary between your brand and our<br/> ambassadors. That means that we create and find the<br/> right connection and make sure it's a match, but the<br/> rest is up to you. Our second position is more hands-on.<br/> By using our cultural knowledge we can, if requested,<br/> help make a stragegy to fit excactly your targeted<br/> audiance in the Scandinavian market. Furthermore we<br/> help with communication between the two parties so any<br/> cultural or communication barriers are avoided.<br/><a href="products.html">Read about our products.</a></p>
</div>
</div>

【讨论】：

'.content' 类只是一个可重复使用的类，用于分配适用于两列的 50% 宽度。但是，响应式框架肯定有助于清理代码。我刚刚为您创建了另一个使用基础的示例。这是完全响应的。 codepen.io/anon/pen/dzpwmV

【参考方案2】：

您可以使用Bootstrap Grid。

 <div class="container">
  <div class="row">
   <div class="col-md-6">
    <h3>About BrandAmb</h3>
    <p><i>BrandAmb</i> is a Danish marketing company  whose<br/> goal mission is to help both Danish and foreign<br/> brands expand their brand in Scandinavia through<br/> social marketing. By analyzing and studying your<br/> brand and the audience that you are trying to reach<br/> we, through our database of ambassadors, connects<br/> your brand with one or several of our brandambassadors.<br/> By using their broad platform our brandambassadors<br/> will help your brand reach the audience that is at target<br/> and get your brand the recognition that it deservs in<br/> Scandinavia. <a href="About-us.html">Read more about us.</a></p>
    </div>

    <div class="col-md-6">
    <h3>Our position</h3>
    <p>When it comes to our position between your brand and<br/> our brandambassors we can have two potions depening<br/> on what your seeking as a brand. The first position is<br/> merely as an intermediary between your brand and our<br/> ambassadors. That means that we create and find the<br/> right connection and make sure it's a match, but the<br/> rest is up to you. Our second position is more hands-on.<br/> By using our cultural knowledge we can, if requested,<br/> help make a stragegy to fit excactly your targeted<br/> audiance in the Scandinavian market. Furthermore we<br/> help with communication between the two parties so any<br/> cultural or communication barriers are avoided.<br/><a href="products.html">Read about our products.</a></p>
    </div>
  </div>
</div>

【参考方案3】：

您也可以使用 display flex。要响应，您必须对容器具有“flex-wrap: wrap”属性和文本的最小宽度。

.container

display: flex;
justify-content:center;


.AboutBA 
text-align: center;
width:50%;



.Position 
text-align: center;
width:50%;

<div class="container">

<div class="AboutBA">
<h3>About BrandAmb</h3>
<p><i>BrandAmb</i> is a Danish marketing company  whose<br/> goal mission is to help both Danish and foreign<br/> brands expand their brand in Scandinavia through<br/> social marketing. By analyzing and studying your<br/> brand and the audience that you are trying to reach<br/> we, through our database of ambassadors, connects<br/> your brand with one or several of our brandambassadors.<br/> By using their broad platform our brandambassadors<br/> will help your brand reach the audience that is at target<br/> and get your brand the recognition that it deservs in<br/> Scandinavia. <a href="About-us.html">Read more about us.</a></p>
</div>
<br/>
<div class="Position">
<h3>Our position</h3>
<p>When it comes to our position between your brand and<br/> our brandambassors we can have two potions depening<br/> on what your seeking as a brand. The first position is<br/> merely as an intermediary between your brand and our<br/> ambassadors. That means that we create and find the<br/> right connection and make sure it's a match, but the<br/> rest is up to you. Our second position is more hands-on.<br/> By using our cultural knowledge we can, if requested,<br/> help make a stragegy to fit excactly your targeted<br/> audiance in the Scandinavian market. Furthermore we<br/> help with communication between the two parties so any<br/> cultural or communication barriers are avoided.<br/><a href="products.html">Read about our products.</a></p>
</div>
</div>