Question 44857 in Html Question posted in
Some basic documentation can be found here.

Why is it that, the text on the right of the images is there instead of down? – Html

.samsung {
  float: left;
  width: 25%;
  padding: 5px;
}

.iphone {
  float: left;
  width: 25%;
  padding: 5px;
}

.xiaomi {
  float: left;
  width: 25%;
  padding: 5px;
}
<section class="phones">
  <h3>Best phones you can chose in 2023</h3>
  <div class="samsung">
    <img src="https://american-pc.com/wp-content/uploads/2023/02/61imYpK33qL._SL1500_.jpg" alt="no internet connetion" width="75%">
    <figcaption>s23 ultra</figcaption>
  </div>
  <div class="Iphone">
    <img src="https://assets.shpresa.al/shop/2022/09/daac540d-cel1351-p.jpg" alt="no internet connetion" width="75%">
    <figcaption>Iphone 14 pro max</figcaption>
  </div>
  <div class="xiaomi">
    <img src="https://www.giztop.com/media/catalog/product/cache/dc206057cdd42d7e34b9d36e347785ca/p/m/pms_1670747135.2084309.png" alt="no internet connetion" width="75%">
    <figcaption>xiaomi 13 pro</figcaption>
  </div>
  <br><br>
</section>
<section class="info">
  <label for="phoneA">Samsung</label>
  <input type="checkbox" id="phoneA" name="footer" value="phone">
  <label for="phoneB">Iphone</label>
  <input type="checkbox" id="phoneB" name="footer" value="phone">
  <label for="phoneC">xiaomi</label>
  <input type="checkbox" id="phoneC" name="footer" value="phone">
  <br>
</section>

the images that i have problem
I am a bigenner at frontend web development and i was testing some new things i learned and i wanted to add 3 images and some options at the bottom but for some reasons it keeps on staying left.I copied some css online to make the images as they are there( i am still not faimiliar with css yet) can someone help me?

I tried sorrunding everything in section and div , adding br but nothing seems to work!

Tags:

2

Answers


  1. 0

    You mistakenly called your class "Iphone" and "iphone"

    I have fixed it below.

    I think you need the text-align:center;

    I have added it below. I have also added a border: 1px solid red;
    If you remove the text-align:center, that border code will allow you to see more easily where it went wrong.

    .phones {
display:flex;
flex-direction:row;
}

.samsung {
  
  width: 25%;
  padding: 5px;
  border: 1px solid red;
  text-align:center;
}

.iphone {

  width: 25%;
  padding: 5px;
  border: 1px solid red;
  text-align:center;
}

.xiaomi {

  width: 25%;
  padding: 5px;
  border: 1px solid red;
  text-align:center;
}
    <section>
  <h3>Best phones you can chose in 2023</h3>
  <div class="phones">
  <div class="samsung">
    <img src="https://american-pc.com/wp-content/uploads/2023/02/61imYpK33qL._SL1500_.jpg" alt="no internet connetion" width="75%">
    <figcaption>s23 ultra</figcaption>
  </div>
  <div class="iphone">
    <img src="https://assets.shpresa.al/shop/2022/09/daac540d-cel1351-p.jpg" alt="no internet connetion" width="75%">
    <figcaption>Iphone 14 pro max</figcaption>
  </div>
  <div class="xiaomi">
    <img src="https://www.giztop.com/media/catalog/product/cache/dc206057cdd42d7e34b9d36e347785ca/p/m/pms_1670747135.2084309.png" alt="no internet connetion" width="75%">
    <figcaption>xiaomi 13 pro</figcaption>
  </div>
  </div>
  <br><br>
</section>
<section class="info">
  <label for="phoneA">Samsung</label>
  <input type="checkbox" id="phoneA" name="footer" value="phone">
  <label for="phoneB">Iphone</label>
  <input type="checkbox" id="phoneB" name="footer" value="phone">
  <label for="phoneC">xiaomi</label>
  <input type="checkbox" id="phoneC" name="footer" value="phone">
  <br>
</section>

    This gives you this, which I think is what you want? (The red borders are just so you can see that the text is centered, even if the images are not centered).

    OK now at last I understand which text was mispositioned!

    What you should do is avoid the "float:left;" approach. Instead, put the three phone image-and-caption DIVs into a single "flexbox", with the CSS I have added for the class phone.

    Is this what you wanted?

    enter image description here

    Login or Signup to reply.
  2. 0

    Try this css for centering all text:

    * {text-align: center;}

    Try this css for centering all text within body

    body {text-align: center;}

    similarly, try this css for centering text within a specific class

    .class_name {text-align: center;}

    btw, share your code for people to better understand the problem.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search