Text-align: center; Not working

HTML-CSS
1

I have a banner that has an image on the left and text on the right but the text is not going to the middle of the right section even though I put text-align: center;.

Code

 <div class="box1">
        <img src="\jwcodeme\assets\ban_1_img.jpg" width="50%" style="float: left;" alt="coding img unavailable or failed to load">
        <span>
            <h1>Coding</h1>
        </span>
    </div>


.box1 {
    background-color: #FC6A03;
    font-family: 'Courier New', Courier, monospace;
    display: flex;
    align-items: center;
}

.box1 span {
    display: flex;
    align-items: center;
    text-align: center;
}

image
image1600×537 242 KB

2

Instead of text-align: center; you should use margin: auto

.box1 {
    background-color: #FC6A03;
    font-family: 'Courier New', Courier, monospace;
    display: flex;
    align-items: center;
}

.box1 span {
    display: flex;
    margin: auto;
    margin-top: 0; <!--- If you want it at the top of the page.-->

}
3

I would probably just go with the auto margin but you can also do:

.box1 span {
  display: flex;
  /* flex: 1 or width: 100%; */
  flex: 1;
  justify-content: center;
}

Or

.box1 span {
  /* flex: 1 or width: 100%; */
  flex: 1;
}

h1 {
  text-align: center;
}

Or get rid of the span and use:

h1 {
  text-align: center;
  /* flex: 1 or width: 100%; */
  flex: 1;
}

More importantly, your use of the alt attribute is not correct. It is not just some text there as an error message in case the image doesn’t load.

https://www.w3.org/WAI/tutorials/images/

4

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.