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

提前THX

認爲的Kristoffer

Answer 1

這適用於無響應的網站。如果您希望它響應，可以使用某些媒體查詢對其進行修改，或者使用基礎等響應框架來定義不同視口尺寸的寬度，例如大6 /中6 /小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

您可以使用顯示器撓性also.To響應，你必須有「柔性包裝：包裝」屬性的容器和最小寬度的文本。

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