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

How do I style a div with span and tag in HTML?

i have a div with two elements

<div style={{color:'black',justifyContent:'center',marginTop:'1.3rem'}}><span><b ><u>{galleyNo}</u></b></span><br/>
                          <span>{galleyItem}</span></div>

I am trying to give styles two the inner elements.I need underline for the text inside tag but giving it in tag doesn’t provide me the desired result.also i need to center align the texts inside the div what will be a probable css for this elements

Tags:

3

Answers


  1. 0

    Add text-align: center; to the container <div>.

    div {

outline: 1px dotted;
text-align: center;
}
    <div style={{color:'black',justifyContent:'center',marginTop:'1.3rem'}}>
  <span>
    <b ><u>{galleyNo}</u></b>
  </span>
  <br/>
  <span>{galleyItem}</span>
</div>
    Login or Signup to reply.
  2. 0

    Is your desired result something like this? (It seems you have not posted a lot of your code into this, but here’s what I’ve got so far with what you gave me [with cleaned-up code for clarity].)

    <div style="color: black; justify-content: center; margin-top: 1.3rem;">
  <span>
    <b>
      <u>
        {galleyNo}
      </u>
    </b>
  </span>
  <br>
  <span>{galleyItem}</span>
</div>

    I’m not sure in what way it is not giving you your desired result, perhaps I’ll need to see something in your original code?

    And as for your centering of the text, this is all that’s required:

    <div style="color: black; margin-top: 1.3rem; text-align: center;">
  <span>
    <b>
      <u>
        {galleyNo}
      </u>
    </b>
  </span>
  <br>
  <span>{galleyItem}</span>
</div>

    You used justify-content instead of text-align.

    P.S. Your <span> tags are doing nothing unless you have some CSS for them.
    For example:

    span {font-weight: bold; text-decoration: underline;}

    The <span> tag doesn’t have any default styles, and I don’t see any JavaScript, etc. to do something with them. I would say they are doing nothing and that you should remove them, but I actually suggest that you not use the <b> and <u> tags, but rather the <strong> and <em> tags respectively, or do something like give the <span> tag class="bold underline" and add this CSS:

    .bold {font-weight: bold;}
.underline {text-decoration: underline;}

    or add the CSS inline like this:

    style="font-weight: bold; text-decoration: underline; /* other styles, etc. */"
    Login or Signup to reply.
  3. 0

    for that you can use normal css, like this:

    Important: W3C recommends to not use b tag, is old and not semantic, you should try another tags, like strong and em

    See:
    https://www.w3schools.com/html/html5_semantic_elements.asp

    https://developer.mozilla.org/es/docs/Web/HTML/Element/b

    http://html.conclase.net/w3c/html401-es/present/styles.html

    .bold {
    font-weight: bold;
}

.underline {
    text-decoration: underline;
}
    <p>
  Normal text
  <span class="bold">bold text</span>
  <span class="underline">underline text</span>
  <span class="bold underline">underline & bold text</span>
</p>

<p>Semantic HTML tags</p>

<p><em>Emphasized text</em></p>

<p><strong>Bold text</strong></p>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search