Vertical Align


#1

This is my css sheet. I want to align the text in my box vertically in the middle of the box. Can you guys help me out?
forget about the line-height.
I could use padding-top in the div block but that would enlarge my box.

img {
	display: block;
	height: 100px;
	width: 300px;
	margin: auto;
}

p {
	text-align: center;
	font-family: Garamond, serif;
	font-size: 18px;
}

/*Start adding your CSS below!*/

div{
 
    height:50px;
    width:120px;
    line-height:50px;
    background-color:#BCD2EE;
    border: 5px dashed #6495ED;
    border-radius:5px;
    margin: auto;
    text-align:center;
    }
    
a{
    text-decoration:none;
    color:green;
    font-family:sans-serif;
    vertical-align:middle;
    line-height:normal;
    }
    
span{
    display: inline-block;
    vertical-align:middle;
    line-height:normal;
    }


#2

you can take a look at exercise 1, they use paragraphs + margin-top to vertical align your text, for the rest, there is this good centering guide, you could also use padding-top and box-sizing:

div { box-sizing: border-box; }

you can read more about box-sizing here, it makes border and padding part of the width and height of an element rather then expanding it


#3

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.