0

I thought floats left and right removed the element from the flow of the dom. How do I center the middle h3 tag on the same line as the floats?

<nav>
<h3 style='float:left;'>web logo</h3>

<h3 style='clear:both;display:inline-block;text-align:center;margin:0 auto;'> special functions</h3>

<h3 style='float:right'>other stuff</h3>
</nav>
DCR
  • 14,737
  • 12
  • 52
  • 115

3 Answers3

1
  1. Put the floats first.
  2. Reduce the styling of the unfloated h3 to just text-align:center
  3. Add display:flow-root to the nav element to stop the margins collapsing.

<nav style='display:flow-root;'>
  <h3 style='float:left;'>web logo</h3>
  <h3 style='float:right'>other stuff</h3>
  <h3 style='text-align:center;'>special functions</h3>
</nav>
Alohci
  • 78,296
  • 16
  • 112
  • 156
0

You should use flexbox for this. Remove all styles that you currently have and add the following to your css.

nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
Sean
  • 936
  • 4
  • 15
0

h3{
margin:0;}
<nav>
   <h3 style='float:left;width:25%'>web logo</h3>

  

   <h3 style='float:right;width:25%;text-align:right'>other stuff</h3>
   
   <h3 style='display: block;margin: 0 auto;text-align:center'> special functions</h3>
</nav>

I would use a code in CSS, opening a tag for the middle h3 and putting an id, like this:

h3#mid{
   display: block;
   margin: 0 auto;
}

You also can add a margin if wanted.

This is how it would look like in html:

<nav>
   <h3 style='float:left;'>web logo</h3>

   <h3 style='display: block;margin: 0 auto;'> special functions</h3>

   <h3 style='float:right'>other stuff</h3>
</nav>
DCR
  • 14,737
  • 12
  • 52
  • 115
Flavia Schoffen
  • 1
  • 2
  • your answer doesn't work. see the snippet I added to your answer to see one way of doing this. – DCR Apr 08 '21 at 02:36