CODEWITHSUNDEEP
cssalignment
user2252219
user2252219

Reputation: 865

Vertically aligning div

I can't seem to get both the image and text to align vertically inside the main div.

https://jsfiddle.net/jf2dgh0j/

.image {
width:50%;
height:auto;
float:right;
vertical-align:middle; }

Upvotes: 0

Views: 510

Answers (4)

HTron
HTron

Reputation: 366

I'm not completely sure what you mean with "get both the image and text to align vertically inside the main div". I understand that you want both text and image to be vertically centered.

first comes the table. then inside the table there goes the table-cell. this should have 100% width and 100% height of the parent element. there you set the vertical-align:center; property. every element inside the table-cell with display:inline-block will be aligned.

.work-subwrap {
    width:70%;
    height:500px;
    background-color:#C87778;
    margin:0 auto;
    margin-top:30px;
    position:relative;
    display:table;
}
.image {
    display:table-cell;
    width:100%;
    height:auto;
    vertical-align:middle;
    text-align:center;
}
.description-wrap {
    display:inline-block;
    background-color:#fff;
    position:absolute;
    top:50%;
    left:50%;
    -webkit-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
}

.image img {width:50%;}

as long as the text / link doesn't have a fixed width / height, I recommend to fix it's position relatively with translate(). The disadvantage of it is that it's not always compatible with ancient browsers.

Upvotes: 0

Marc Audet
Marc Audet

Reputation: 46785

I was not sure why you have 200px padding on the top of the parent div, but the following might be what you are trying to achieve.

Apply display: table-cell to both the .description-wrap and the .image child elements.

.work-subwrap {
    width:70%;
    background-color:#C87778;
    margin:0 auto;
    margin-top:30px;
    display:table;
}
.description-wrap, .image {
    display: table-cell;
    width: 50%;
    vertical-align: middle;
    text-align: center;
}
.description-wrap a {
    display: inline-block;
    padding: 10px;
    background-color: white;
}
.image img {
    width:100%;
    vertical-align: top;
}
<div class="work-subwrap">
    <div class="description-wrap">	<a class="project-link" href="#modal1">Maru</a></div>
    <div class="image">
        <img alt="" id="first" src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcQdiIK0bVvSbRnegxQPMS6V0nBHFT40j6P6OH-C11pmooy6Duad">
    </div>
</div>

Upvotes: 1

CupawnTae
CupawnTae

Reputation: 14580

You have a bit of a mix of different styling approaches. If you want to use display: table to align things, don't also use float or position: absolute.

I'm not 100% clear what you're trying to achieve, but the CSS below vertically centres the text and image divs. If you want them centred within the parent div, you need to adjust the padding as well.

.image {
    width: 50%;
    display: table-cell;
    vertical-align: middle;
}
.description-wrap {
    background-color: #fff;
    display: table-cell;
    vertical-align: middle
}

Updated fiddle https://jsfiddle.net/jf2dgh0j/1/

Upvotes: 0

Ben Fried
Ben Fried

Reputation: 2204

Some people are anti-table, but to be honest with you, this is EXACTLY what tables are for. Your div's simply turned in to td's. Modified fiddle using a table instead of divs below:

https://jsfiddle.net/jjsx2t6e/

I find for vertically aligning most things, tables really are your friend and make life so much easier.

Upvotes: 0

Related Questions