Problems getting text and images to centre vertically

Question

I've read numerous pages both here and online about how to get text and images to centre vertically, but I just don't seem to be able to manage it. Clearly there is something that I am missing, but what?

tr:nth-child(odd) {
  background-color: #FFF;
}

tr:nth-child(even) {
  background-color: #FFF4E3;
}

#serviceList {
  background-color: #FFDEA5;
  border: 2px double white;
  margin-bottom: 10px;
}

.serviceContentMode {
  float: left;
  margin: 2px;
  width: 70px;
}

.serviceContentNum {
  float: left;
  margin: 2px;
  font-size: 20pt;
  width: 75px;
}

.serviceContentOp,
.serviceContentDesc {
  font-size: 12pt;
  line-height: 150%;
}

.serviceContentOp {
  font-weight: bold;
}

.serviceContentDesc {
  font-style: italic;
}

<div id="serviceList">
  <h1>Services</h1>
  <h3>The following services operate in Southend-on-sea:</h3>
  <table width="100%" border="0">
    <tbody>
      <tr>
        <td>
          <div class="serviceContentMode"><img alt="Wheelchair-accessible bus" src="http://www.travelinesoutheast.org.uk/se/images/means/WheelchairBus.gif" /></div>
          <div class="serviceContentNum"><span style="vertical-align:middle;">1</div></span>
            <div class="serviceContentOp">Arriva (in Herts and Essex)</div>
            <div class="serviceContentDesc">Southend - Hadleigh - South Benfleet - Thundersley - Rayleigh</div>
        </td>
      </tr>
      <tr>
        <td>
          <div class="serviceContentMode"><img alt="Wheelchair-accessible bus" src="http://www.travelinesoutheast.org.uk/se/images/means/WheelchairBus.gif" /></div>
          <div class="serviceContentNum"><span style="vertical-align:middle;">28</div></span>
            <div class="serviceContentOp">First in Essex</div>
            <div class="serviceContentDesc">Southend - Hadleigh - Thundersley - Benfleet - Pitsea - Basildon</div>
        </td>
      </tr>
      <tr>
        <td>
          <div class="serviceContentMode"><img alt="Wheelchair-accessible coach" src="http://www.travelinesoutheast.org.uk/se/images/means/Coach.gif">
          </div>
          <div class="serviceContentNum"><span style="vertical-align:middle;">X5</span></div>
          <div class="serviceContentOp">First in Essex</div>
          <div class="serviceContentDesc">Southend - Southend Airport - Rayleigh - Chelmsford - Barnston - Stansted Airport</div>
        </td>
      </tr>
    </tbody>
  </table>
  </div>

I know that the vertical-align: middle is currently only applied to the <span> on the service number in the HTML file, rather than in the CSS, but I've tried all sorts of different combinations all to no avail.

So what am I missing?

Thanks

That's what comes of footling around with stuff to get it to work, cutting things out and pasting it back in again ... although I think "full" of errors is perhaps a bit harsh. It was just three closing tags that I had the wrong way round. Doesn't make a bit of difference to what I'm trying to achieve, however. — StuartR143, Apr 30 '17 at 17:32
Have you tried common techniques to vertical align items inside a div? It is a question that gets asked [a ton](http://stackoverflow.com/a/8865463/4124802). — Django, Apr 30 '17 at 18:10
@Django yes! Although I'm quite prepared to believe that I've missed some. I try not to ask questions until I've exhausted everything I can find (or understand, whichever comes first!) — StuartR143, Apr 30 '17 at 19:01
I see. And I didn't downvote your question or anything, but why are you using table structure at all? If you were just using tables, you could have set `` to vertical-align content in some table cells. If you were just using divs I wouldn't go with the "float" approach, I would go with display:table and display:table-cell; accordingly, or even better display:inline-block; Are you familiar with any of those? In general, don't use float attribute to structure simple scheme as this (you would only run into trouble like this:). I can fetch some code for you if that helps. — Django, May 01 '17 at 13:31
@Django D'oh! That's what happens when you aren't totally confident with what you are doing, and copy what is already out there. Of _course_ I should be using `display: inline-block`. Doing that makes all of my problems go away. I'll post my amended HTML / CSS as a separate answer, but many thanks! — StuartR143, May 02 '17 at 08:40
@StuartR143 Glad it worked out for you :) BTW, you should accept your own answer as the correct one — Django, May 02 '17 at 15:09

score 0 · Answer 1 · answered Apr 30 '17 at 17:03

0

I don't understand why have you used div tag inside td.

You have to check the red tags, because are badly closed

You close first div before span tag

answered Apr 30 '17 at 17:03

Javier Segarra Martinez

46
3

I didn't have `tr` at all at first, but I couldn't get the coloured ruling to work properly without it. As to why I then continued to use `div` inside `tr`, I confess that was partly because the developer whose code I was partly reusing had done that. Would you have nested / spanning `tr` and `td` then? – StuartR143 Apr 30 '17 at 17:34

score 0 · Accepted Answer · answered May 02 '17 at 09:02

With many thanks to @Django, the answer was to get rid of the table and to use just DIV with display: inline-block elements. The revised HTML/CSS is below.

#serviceList {
    font-family:Arial, Verdana, Geneva, Helvetica, sans-serif;
    font-size:0.75em;
    color:#000;
    background-color: #FFDEA5;
    border: 2px double white;
    margin-bottom: 10px;
    }

.service {
    display: block;
    width: 100%;
    margin-bottom: 2px;
    }

.service:nth-child(odd) {
    background-color: #FFF;
}

.service:nth-child(even) {
    background-color: #FFF4E3;
    }

.serviceText, .serviceMode, .serviceNum {
    display: inline-block;
    vertical-align: middle;
    }

.serviceMode {
    margin: 2px;
    width: 70px;
    }

.serviceNum {
    margin:2px;
    font-size:20pt;
    width:75px;
    }

.serviceOp, .serviceDesc { 
    font-size:12pt; 
    line-height:150%; 
    }

.serviceOp {
    font-weight: bold;
    }

.serviceDesc {
    font-style: italic; 
    }

<div id="serviceList">
  <h1>Services</h1>
  <h3>The following services operate in Southend-on-sea:</h3>
  <div class="service">
    <div class="serviceMode"><img alt="Wheelchair-accessible bus" src="http://www.travelinesoutheast.org.uk/se/images/means/WheelchairBus.gif"/></div>
    <div class="serviceNum">1</div>
    <div class="serviceText">
      <div class="serviceOp">Arriva (in Herts and Essex)</div>
      <div class="serviceDesc">Southend - Hadleigh - South Benfleet - Thundersley - Rayleigh</div>
    </div>
  </div>
  <div class="service">
    <div class="serviceMode"><img alt="Wheelchair-accessible bus" src="http://www.travelinesoutheast.org.uk/se/images/means/WheelchairBus.gif"/></div>
    <div class="serviceNum">28</div>
    <div class="serviceText">
      <div class="serviceOp">First in Essex</div>
      <div class="serviceDesc">Southend - Hadleigh - Thundersley - Benfleet - Pitsea - Basildon</div>
    </div>
  </div>
  <div class="service">
    <div class="serviceMode"><img alt="Wheelchair-accessible coach" src="http://www.travelinesoutheast.org.uk/se/images/means/Coach.gif"></div>
    <div class="serviceNum">X5</div>
    <div class="serviceText">
      <div class="serviceOp">First in Essex</div>
      <div class="serviceDesc">Southend - Rayleigh - Chelmsford - Barnston - Stansted Airport</div>
    </div>
  </div>
</div>

Problems getting text and images to centre vertically

2 Answers2