Aligning vertically center all content in a div based on another div without jquery or javascript

Question

I have two div which exist in a container div of both in my html page and I want align all content exist in a sub div corresponding to contents of another div. Is it possible to do this by CSS rules only?

<div class="container">
    <div class="subDiv1">
        some content here (with 400px height)
    </div>
    <div class="subDiv2">
        some content here (with 270px height)
    </div>
</div>

Edit: First content is an image with variable height and second content is a label variable text length and I want align center both of them into same horizontal line vertically.

possible duplicate: https://stackoverflow.com/a/33049198/3597276 — Michael Benjamin, Nov 18 '17 at 18:06

score 0 · Answer 1 · answered Nov 18 '17 at 18:10

0

If you want to have the same CSS for .subDiv1 and .subDiv2, why not just use the exact same CSS code for both of them?

Vertically aligning content within a div can be done with the following CSS:

.container {
margin-left:auto;
margin-right:auto;
}

answered Nov 18 '17 at 18:10

Max Svenman

29
6

This rule will align horizontally center the content not vertically. – Nov 18 '17 at 18:19
My bad. Wouldn't doing the same thing but replacing left and right with top and bottom work? – Max Svenman Nov 18 '17 at 18:24
I tried that you are saying before but it didn't worked. – Nov 18 '17 at 18:27

Muhammad Usman · Answer 2 · 2017-11-20T10:12:29.143

0

.container{
display: table;
width:100%;
}
.subDiv1,.subDiv2{
  padding: 10px;
  display: table-row;
}
.subDiv1{
  background-color:silver;
}
.subDiv2{
   background-color:#a7a5a5;
}
.container span {
  display:inline-block;
  width: 100px;
  height: 100px;
  background: gray;
  vertical-align: middle;
}

<div class="container">
    <div class="subDiv1">
        some content here <span>(with 400px height)</span>
    </div>
    <div class="subDiv2">
        some content here <span>(with 270px height)</span>
    </div>
</div>

edited Nov 20 '17 at 10:12

answered Nov 18 '17 at 19:36

Muhammad Usman

357
2
14

I want align the image and label vertically center in a same horizontal line but your code aligning them center in a same vertical line. – Nov 20 '17 at 09:46
can have any view what you are trying to doing – Muhammad Usman Nov 20 '17 at 09:59
at least draw me something on paper – Muhammad Usman Nov 20 '17 at 10:00
I think I'm clear about what I'm asking. I want align the image and label in a same horizontal line as they are center of "container" div. – Nov 20 '17 at 10:07
the dark gray area is supposed to be a image and "some content here" supposed to be a tag – Muhammad Usman Nov 20 '17 at 10:15

Aligning vertically center all content in a div based on another div without jquery or javascript

2 Answers2