CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Codingjr
Codingjr

Reputation: 27

Text align HTML & CSS

Ok so I've been trying to align my text and nothing seems to be happening. What is the best method to align this code, I want it centered with the shopping bag. I'm also using CSS to style.

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

Upvotes: 0

Views: 90

Answers (3)

Shailesh Nayak K
Shailesh Nayak K

Reputation: 42

You could use Flex layout for this.

Try this:

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

This should do the job

Upvotes: 0

Saw Zin Min Tun
Saw Zin Min Tun

Reputation: 642

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

Upvotes: 1

DollarChills
DollarChills

Reputation: 1086

You could wrap the content in a div and use text-align to align the text.

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

Upvotes: 2

Related Questions