CODEWITHSUNDEEP
htmlcssweb
user3116543
user3116543

Reputation:

CSS cannot control text alignment , as the whole div seems to move

How do I move the text to the centre of the images to make it align nicely, because at the moment it isn't aligned at all, it's just sitting at the very bottom. It needs to work for mozilla

`<div class="socialMedia">
            <h3>Let's be friends:</h3>
            <a href="#"><img src="images/fb.png" alt="simple gym facebook"></a>
            <a href="#"><img src="images/email.png" alt="simple gym facebook"></a>
            <a href="#"><img src="images/youtube.png" alt="simple gym facebook"></a>
    </div>`

.socialMedia{
    -moz-box-orient:horizontal;
    -moz-box-flex:1;

    display:-webkit-box;
    -webkit-box-orient:horizontal;
    -webkit-box-flex:1;

    display:-ms-box;
    -ms-box-orient:horizontal;
    -ms-box-flex:1;
    float:right;

}
.socialMedia img{
    padding-right:5px;
}
.socialMedia img:last-child{
    padding-right:0px;
}
.socialMedia h3 {
    font-size:14px;
    font-family:Times, Arial,serif;
    font-weight:normal;
    color:#b6b5b5;
    padding-bottom:5px;
    padding-right:10px;
    display:-moz-box;
}

Upvotes: 0

Views: 62

Answers (2)

pschueller
pschueller

Reputation: 4427

I would switch the wrapper to display as a table, and then vertically align middle the table cells.

.socialMedia{
    display: table;
}
.socialMedia a {
    display: table-cell;
    vertical-align: middle;
}
.socialMedia h3 {
    display: table-cell;
    vertical-align: middle;
}

Working example: jsFiddle

Upvotes: 0

Ruddy
Ruddy

Reputation: 9923

Using 1ine-height is an option for this if you will be using a fixed height. The only thing I changed was the H3 adding line-height: 25px; and getting rid of the H3 margin using margin: 0;.

HTML:

<div class="socialMedia">
     <h3>Let's be friends:</h3>
 <a href="#"><img src="images/fb.png" alt="simple gym facebook" /></a>
 <a href="#"><img src="images/email.png" alt="simple gym facebook" /></a>
 <a href="#"><img src="images/youtube.png" alt="simple gym facebook" /></a>

</div>

CSS:

.socialMedia {
    -moz-box-orient:horizontal;
    -moz-box-flex:1;
    display:-webkit-box;
    -webkit-box-orient:horizontal;
    -webkit-box-flex:1;
    display:-ms-box;
    -ms-box-orient:horizontal;
    -ms-box-flex:1;
    float:right;
}
.socialMedia img {
    padding-right:5px;
}
.socialMedia img:last-child {
    padding-right:0px;
}
.socialMedia h3 {
    font-size:14px;
    font-family:Times, Arial, serif;
    font-weight:normal;
    color:#b6b5b5;
    margin:0;
    line-height: 25px;
}

DEMO HERE

Upvotes: 1

Related Questions