Question

好的，所以我一直试图调整我的文字，似乎没有任何事情发生。对齐此代码的最佳方法是什么，我希望它以购物袋为中心。我也使用CSS来设计风格。

＆＃13;

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

＆＃13;

Answer 1

您可以将内容包装在div中，并使用text-align来对齐文本。

<强> 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 2

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

您可以使用Flex布局。

试试这个：

<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;
}

这应该做的工作

文字对齐HTML＆amp; CSS

3 个答案: