this is my first time on Stack Overflow, though I have found a lot of solutions here. But I couldn't find an answer to this question. I made a div clickable by putting an <a href>
around it and then inside the <div>
tags I put the text. Here is the link to JSFiddle: http://jsfiddle.net/fw6HT/3/
I am sure that I am overlooking something really obvious, but I can't get the text to vertically align within the div.
I hope you guys will be able to help me out!
I also stand open to other suggestions as to how to do this in a better way.
div {
background:red;
top:50px;
height:200px;
width:200px;
text-align:center;
display:table-cell;
vertical-align:middle;
}
or if you have one line text
div {
background:red;
top:50px;
height:200px;
width:200px;
text-align:center;
line-height:200px;
}
but first solution is the best and common one
You basically will want to either
and then follow the rules here: Vertical alignment of elements in a div
For completeness' sake, there's one super simple way to vertically and horizontally align any element within another element: flexible box layout module . Doesn't matter if you don't know the exact size of the content, doesn't matter if the container has a dynamic height/width.
All you need* is these three:
display: flex;
justify-content: center;
align-items: center;
*Of course, flexbox is a fairly new feature. It's not available on older IEs (well, not without a polyfill anyway) and it might require some browser prefixing too.
If you're not targeting older browsers and/or use something like Autoprefixer , flexbox is pretty damn awesome.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.