[SOLVED] How would I line up this code correctly?

HTML & CSS
1

How would I fix this code so it’s lined up correctly?

It’s the text box underneath that is out of place.

Both codes use this same css for the text box, but why isn’t it working here, and how do I fix that?

Bad

This is what the code looks like when I remove display: table

https://i.imgur.com/0TmZTUY.png

But display: table; seems to be working fine with the other code.

p.my-content {
  display: table;
  margin: 20px 0 0;
  background: #000000;
  width: 300px;
  border: 1px solid #0059dd;
  font-weight: 900;
  font-size: 22px;
  font-family: "Times New Roman", Times, serif;
  padding: 5px;
  color: #0059dd;
  text-align: center;
}

span {
  display: table-cell;
  vertical-align: middle;
}

<p class="my-content"><span>Some randm text<br/> Some randm text<br/> Some randm text</span></p>

https://i.imgur.com/mN1A6vu.png

Good
https://jsfiddle.net/c2190pfa/
https://i.imgur.com/1ZCdf1t.png

2

This one is lined up correctly:

And how would I fix it?

<form>
  <div class="container">
    <div class="container-left">
      <input id="input" type="text" name="someNameHere" value="http://hi5.1980s.fm/;"/>
    </div>
    <div class="container-right">
      <input id="sent" type="submit" value="Set"/>
    </div>
    <div class="container-right-right">
      <input id="clear" type="button" value="Clear"/>
    </div>
  </div>
</form>
<p class="my-content"><span>Some randm text<br/> Some randm text<br/> Some randm text</span></p>

This code is uneven:
Comparing both codes why is this one uneven?


<div class="outer">
  <div class="tcell">
    <audio autoplay id="player"></audio>


    <div class="container">
      <div class="container-left">
        <button id="button">Play / Pause</button>
      </div>
      <div class="container-right">
        <div class="radios"><a href="" target="_blank">Radio Inputs</a></div>
      </div>

      <div class="container-right-right">
        <input id="input" type="text" name="someNameHere" value="http://hi5.1980s.fm/;" />
        <input id="sent" type="submit" value="Set" />
        <input id="clear" type="button" value="Clear" />
      </div>
    </div>

    <p class="my-content"><span>Some randm text<br/> Some randm text<br/> Some randm text</span></p>

  </div>
</div>
3

It’s hard to give an answer without knowing what you are trying to achieve.

One code has extra elements in it, the radio inputs.

Is it supposed to look like the first image

4

I managed to figure it out. I had div tags in the wrong spot.

<div class="outer">
  <div class="tcell">
    <audio autoplay id="player"></audio>


    <div class="container-first">
      <div class="container-left">
        <button id="button">Play / Pause</button>
      </div>

      <div class="container-right">
        <div class="radios">Radio Inputs</div>
      </div>
    </div>

    <div class="container-second">
      <input id="input" type="text" name="someNameHere" value="http://hi5.1980s.fm/;" />
      <input id="sent" type="submit" value="Set" />
      <input id="clear" type="button" value="Clear" />
    </div>

    <p class="my-content"><span>Some randm text<br/> Some randm text<br/> Some randm text</span></p>

1 Like
5

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