テキストの整列HTMLとCSS

Question

私はテキストを整列させようとしていましたが、何も起きていないようです。このコードを整列する最良の方法は何ですか、私はショッピングバッグを中心にしたいと思います。私はCSSを使ってスタイルをつけています。

<div class="total"> 
 
    <span class="simpleCart_total">$0.00</span> 
 
</div> 
 
<h3> 
 
    <center> 
 
    <img src="shopping%20bag.png" alt="shopping bag" width="25" height="25"> 
 
    </center> 
 
</h3> 
 
<script src="Java.js"></script> 
 
<p><a href="Java.js" class="simpleCart_empty"> Empty Cart</a></p>

Answer 1

.total,h3,p{ 
 
text-align: center; 
 
}

<div class="total"> 
 
    <span class="simpleCart_total">$0.00</span> 
 
</div> 
 
<h3> 
 
    <center> 
 
    <img src="shopping%20bag.png" alt="shopping bag" width="25" height="25"> 
 
    </center> 
 
</h3> 
 
<script src="Java.js"></script> 
 
<p><a href="Java.js" class="simpleCart_empty"> Empty Cart</a></p>

Answer 2

あなたはdiv要素のコンテンツをラップしてテキストを整列するために、テキスト整列を使用することができます。あなたはこのためにFlexのレイアウトを使用することができます

HTML

<div class="textCenter"> 
    <div class="total"> 
     <span class="simpleCart_total">$0.00</span> 
    </div> 
    <h3><center><img src="shopping%20bag.png" alt = "shopping bag" width="25" height="25"></center></h3> 
    <script src="Java.js"></script> 
    <p><a href="Java.js" class="simpleCart_empty"> Empty Cart</a></p> 
</div> 

CSS

.textCenter { 
    text-align: center; 
} 

Answer 3

。

これを試してみてください：

<div class="flex_container"> 
    <div class="total"> 
     <span class="simpleCart_total">$0.00</span> 
    </div> 
    <h3><center><img src="shopping%20bag.png" alt = "shopping bag" 
     width="25" height="25"></center></h3> 
    <script src="Java.js"></script> 
    <p><a href="Java.js" class="simpleCart_empty"> Empty Cart</a></p> 
</div> 

CSS：

.flex_container { 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
} 

これは