How to position div to right side and middle of parent div

Question

I have problems with divs. I would like the link "Go" to be right aligned and vertically middle of its parent div. I have tried several ways, but no success yet.

And here you can see my HTML and CSS code:

div.row {
  position: relative;
  border-bottom: 1px dotted #999999;
}
div.list div.name {
  float: left;
  width: 40%;
}
div.list div.info {
  float: left;
  width: 60%;
}
div.list div.action {
  display: inline-block;
  text-align: right;
  vertical-align: middle;
}

<div class="list">
  <div class="row">
    <div class="name">
      <span>1</span>
      <br />
      <a href="1.php">1</a>
      <br />(2015-09-30)
    </div>

    <div class="info">
      <b>Place:</b>
      <br />Now 6
      <br />Later 32

      <div class="action">
        <a href="1go.php">Go</a>
      </div>
    </div>
  </div>
</div>

So, if you have better ideas and know how I could solve my problem, I would love to hear.

If possible, I'm looking for a cross-browser solution. No JavaScript/jQuery allowed this time.

When you say cross-browser, do you include old browser versions? Flexbox is by far the easiest solution, but older versions of IE will have trouble. — Cameron, Aug 04 '16 at 21:38
Possible duplicate of [vertical alignment of elements in a div](http://stackoverflow.com/questions/79461/vertical-alignment-of-elements-in-a-div) — Cameron, Aug 04 '16 at 21:40
No flexbox, thanks. It would be nice if the page worked in IE 7. — xms, Aug 04 '16 at 21:42

score 1 · Answer 1 · edited May 23 '17 at 12:17

1

For a parent with a dynamic height and cross browser functionality, you will need to use an older CSS2 trick, using display: table-cell inside a display: table div. This explains it in more detail

HTML

<div class = "info-left">
    <b>Place:</b>
    <br />Now 6
    <br />Later 32
  </div>

CSS

.info{
  display: table;
}

div.info div.action{
  display: table-cell;
  vertical-align: middle;
}

Here's a fiddle

edited May 23 '17 at 12:17

Community

1
1

answered Aug 04 '16 at 21:44

Tony Scialo

5,457
11
35
52

`margin-top: 17px;` is not so good, because I do not know the height of the parent div. It can be what ever. – xms Aug 04 '16 at 21:50
Updated to account for this – Tony Scialo Aug 04 '16 at 22:02
Thanks a lot! Would this be possible to do without `display: table;` and `display: table-cell;`? It would be great if this worked in IE 7. – xms Aug 05 '16 at 15:39
Will something like this work for you? https://jsfiddle.net/iamnottony/s6agndL0/4/ It can get very challenging to do responsive design in IE7, hence why it is almost never done – Tony Scialo Aug 05 '16 at 15:54
The link "Go" is not aligned right and middle of its parent. – xms Aug 05 '16 at 16:55
are you able to use JS? This wont be easily solved using just CSS – Tony Scialo Aug 05 '16 at 19:35

How to position div to right side and middle of parent div

1 Answers1