CODEWITHSUNDEEP
htmlcss
Wafflasy
Wafflasy

Reputation: 31

max-width and word-wrap: break-word causing text to be aligned to the left

I'm very new to HTML and CSS so I'll probably explain this poorly, but here I go. Basically, I'm trying to make this paragraph not stretch across the entire page by using word-wrap and a maximum width of 500px. It works but causes my text to be aligned to the left and not the center like I want. Does anyone know a fix?

.para {
  text-align: center;
  max-width: 500px;
  word-wrap: break-word;
}

<div class="div">
    <hr/>
   <main>
      <img src=""  width="400" height="400"/>
      <h1>AAAAAA</h1>
      <section>
        <h2>About me</h2>
        <p class="para">AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</p>

Upvotes: 3

Views: 339

Answers (1)

Atif Khan
Atif Khan

Reputation: 226

To wrap with the width you have to add overflow-wrap: break-word; in your .para class CSS.

like this:

.para {
  text-align: center;
  max-width: 500px;
  overflow-wrap: break-word;
}

I tried it in my code and the text centers properly, if you want the paragraph to be the center of the page/screen. You can add the margin: 0 auto; in the .para class CSS.

also, a small tip is not to name the class "div" instead make it a better class name for example wrapper or something that relates to your section.

Upvotes: 1

Related Questions