如何将 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

这适用于非响应式网站。如果您希望它具有响应性，您可以使用一些媒体查询对其进行修改，或者使用诸如 foundation 之类的响应式框架来定义不同视口尺寸的宽度，例如 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 also.To 来响应您必须 "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>

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

How to center two text columns in CSS.

html

css

layout

center

alignment