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

Question

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

这是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>

提前谢谢

问候克里斯托弗

Answer 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>

Answer 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>

Answer 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>