I would like to vertical align a image in the center of a div.
For this I use this code:
<div id="cboxLoadedContent" style="width: 1024px; overflow: auto; height: 738px; vertical-align: middle;">
<img class="cboxPhoto" src="" style="cursor: pointer; float: none; width: 50%; vertical-align: middle;"></img>
</div>
JSFiddle: http://jsfiddle.net/3uk642wg/
How can I achieve that?
div#cboxLoadedContent {
....
display: table-cell;
text-align: center;
vertical-align: middle;
}
jsfiddle - http://jsfiddle.net/3uk642wg/1/
div#cboxLoadedContent {border: 1px solid #333; display: inline-block;text-align: center; display: table-cell;vertical-align: middle;}
.cboxPhoto {vertical-align: middle;}
<div id="cboxLoadedContent" style="width: 1024px; overflow: auto; height: 738px; vertical-align: middle;">
<img class="cboxPhoto" src="https://www.google.com//images/srpr/logo11w.png" style="cursor: pointer; float: none; width: 50%; vertical-align: middle;"></img>
</div>
If you are running this on modern browsers you can try this.
div#cboxLoadedContent {
border: 1px solid #333;
display: inline-block;
text-align: center;
}
.cboxPhoto {
position: relative;
top: 50%;
transform: translateY(-50%);
}
Related
I'm not sure what to do, I've tried using position, but it just aligns to the middle of the page, not the div.
I'm trying to align it vertically in the middle.
.img1 {
float: right;
width: 20%;
margin-right: 200px;
display: inline-block;
vertical-align: middle;
}
.img1 {
border-radius: 50%;
border: 5px solid white
}
.container {
width: 100%;
height: 500px;
background-color: black;
display: inline-block;
}
<div class="container">
<img class="img1" src="https://via.placeholder.com/500.jpg">
</div>
Wrap it in a flexbox container
.img1 {
float: right;
width: 20%;
margin-right: 200px;
display: inline-block;
vertical-align: middle;
}
.img1 {
border-radius: 50%;
border: 5px solid white
}
.container {
width: 100%;
height: 500px;
display:flex;
align-items:center;
background-color: black;
}
<div class="container">
<img class="img1" src="https://via.placeholder.com/500.jpg">
</div>
Fiddle: https://jsfiddle.net/eze5x9t9/
HTML:
<div style="width: 100%; overflow: hidden; height: 65px; background: #00CC00;">
<div style="width: 60%; overflow: hidden; float: left; background: #3074A3; color: #EDEDED; height: 65px; text-align: center; display: table; vertical-align: middle;">
<span style="font-size: 35px;display: table-cell;vertical-align: middle;">My Name</span>
</div>
<div style="width: 40%; overflow: hidden; float: left; background: #266996; color: #EDEDED; height: 65px; text-align: center; display: table; vertical-align: middle;">
<span style="font-size: 20px;display: table-cell;vertical-align: middle;">My Job</span>
</div>
</div>
Screenshot:
Why is there a green space at the end? The fiddle was done in Chrome.
It's a common BUG for the WebKit browsers, no fixing actually.
reference:
https://lists.webkit.org/pipermail/webkit-unassigned/2006-January/002684.html
https://css-tricks.com/percentage-bugs-in-webkit/
http://www.screenr.com/pvB8
Somehow in Chrome the outer div is exactly one pixel wider than the contained divs.
You could however solve that by not using display: table; and display: table-cell; (if you only did that to make the vertical centering work) like so:
<div style="width: 100%; height: 65px; background: #00CC00;">
<div style="width: 60%; float: left; background: #3074A3; color: #EDEDED; height: 65px; text-align: center;">
<span style="font-size: 35px; line-height: 65px;">My Name</span>
</div>
<div style="width: 40%; float: left; background: #266996; color: #EDEDED; height: 65px; text-align: center;">
<span style="font-size: 20px; line-height: 65px;">My Job</span>
</div>
</div>
Edit: A second code snippet showcasing the standard method for vertical centering using absolute positioning and transform: translate:
.outer {
height: 65px;
background-color: #00cc00;
display: flex;
}
.inner {
width: 60%;
float: left;
background: #3074A3;
color: #EDEDED;
height: 65px;
text-align: center;
font-size: 35px;
position: relative;
}
.inner + .inner {
width: 40%;
background: #266996;
font-size: 20px;
}
.inner > span {
display: inline-block;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
<div class="outer">
<div class="inner">
<span>My Name</span>
</div>
<div class="inner">
<span>My Job<br />Good job!</span>
</div>
</div>
i have a button inside a div which is currently at the top of the div. I want to center it vertically inside iths parent div.
.button-login {
background-color: white;
border: 2px solid #01BDE0;
border-radius: 4px;
color:#01BDE0;
width: 100%;
height:46px;
vertical-align: middle;
font-size: 1vw;
display: block;
}
This is css for button.
<div class=" pure-u-1 pure-u-md-2-24"><button class="button-login">LOG IN</button></div>
This is the html part.
I tried vertical align its not working.
Try This...
<style>
.pure-u-1 { width:100%;}
.center {height: 500px; background-color: #222;}
.vertical-align {position: relative; top: 50%; transform: translateY(-50%); }
</style>
<div class=" pure-u-1 pure-u-md-2-24">
<div class="center" align="center">
<div class="vertical-align">
<button class="button-login">LOG IN</button>
</div>
</div>
</div>
.video-contant {
position: absolute;
background: rgba(7, 7, 7, 0.52);
width: 100%;
top: 0px;
height: 100%;
display: table;
}
.hctr {
display: table-cell;
vertical-align: middle;
text-align: center;
color: #fff;
width: 100%;
overflow: hidden;
}
<div class="video-contant">
<div class="hctr">
<button>onewebbell.com<button>
</div>
</div>
Im trying to vertically align three images inside a div. But somehow my vertical alignment doesn't work and I cannot undertand what I'm doing wrong.
My html:
<div class="maketable">
<div class="makecell" id="cell1">
<input type="checkbox" id="nutrbox" value="nutrition" onclick="updateChoice()" />
<label for="nutrbox" onclick="updateChoice()">Jag vill ha näringstabell i slutet av min bok</label>
</div>
<div class="makecell" id="cell2">
<div class="arrowdiv">
<img src="./images/leftarrow.png" width="64px" />
</div>
<div id="imagediv">
<img src="./images/pages/part3/nutrition/Nutrition_Front-1.png" width="296px" />
</div>
<div class="arrowdiv">
<img src="./images/rightarrow.png" width="64px" />
</div>
</div>
</div>
And my css:
.maketable{
margin-left: auto;
margin-right: auto;
width: 100%;
margin-bottom: 20px;
display: table;
clear: both;
}
.makecell{
vertical-align: middle;
display: table-cell;
}
#imagediv{
display: inline-block;
margin: 30px auto 0px auto;
width: 296px;
height: 420px;
color: #000;
border: 1px solid black;
text-align: center;
}
.arrowdiv {
display: inline-block;
width: 64px;
margin: 3px;
}
The result is the following:
As you can see, I want to have the arrows vertically aligned in the middle of the center picture, but how ever I do it, i cannot get it to work. I've tried fiddling with float but that made it much worse. Can anyone spot what i'm doing wrong?
You need to apply display: inline-block (or table-cell) and vertical-align: middle to .makecell, #imagediv and .arrowdiv.
Fiddle
.maketable {
margin-left: auto;
margin-right: auto;
width: 100%;
margin-bottom: 20px;
display: table;
clear: both;
}
.makecell, #imagediv, .arrowdiv {
vertical-align: middle;
display: inline-block;
}
#imagediv {
margin: 30px auto 0px auto;
width: 296px;
height: 420px;
color: #000;
border: 1px solid black;
text-align: center;
}
.arrowdiv {
width: 64px;
margin: 3px;
}
<div class="maketable">
<div class="makecell" id="cell1">
<input type="checkbox" id="nutrbox" value="nutrition" onclick="updateChoice()" />
<label for="nutrbox" onclick="updateChoice()">Jag vill ha näringstabell i slutet av min bok</label>
</div>
<div class="makecell" id="cell2">
<div class="arrowdiv">
<img src="http://www.dummyimage.com/64" width="64px" />
</div>
<div id="imagediv">
<img src="http://www.dummyimage.com/296x420" width="296px" />
</div>
<div class="arrowdiv">
<img src="http://www.dummyimage.com/64" width="64px" />
</div>
</div>
</div>
Just change the display: inline-block; to display: table-cell; and add vertical-align: middle; in your .arrowdiv and #imagediv CSS:
#imagediv{
display: table-cell;
margin: 30px auto 0px auto;
width: 296px;
height: 420px;
color: #000;
border: 1px solid black;
text-align: center;
vertical-align: middle;
}
.arrowdiv {
display: table-cell;
width: 64px;
margin: 3px;
vertical-align: middle;
}
Here is a DEMO Fiddle.
I'm trying to vertically center elements within a div, so per http://www.w3.org/Style/Examples/007/center.en.html, I set a min-height, vertical-align: middle and display: table-cell, but the text inside my div is still top-aligned.
<div id="fancybox-title-div" style="border: 1px solid black; min-height: 40px; display: table-cell; vertical-align: middle; width:50%; text-align: center; ">
<div style="height: 50px; float: left; width: 25px; background-color: blue"></div>
<div style="width: 70%">
<span>text</span><br><a href="'+link+'" >view comments</a>
</div>
</div>
Here's a jsFiddle for a visual:
http://jsfiddle.net/ccross59/gARYk/15/
What am I doing wrong?
My understanding and the way it has always worked for me is that display: table-cell has to be inside another element (like a div) with display: table.
Example:
http://jsfiddle.net/495Rm/
Example code:
div#top{
display:table;
height:100px;
border:1px solid red;
}
div#top{
display:table-cell;
vertical-align:middle;
}
Here's the solution from my comment: http://jsfiddle.net/thirtydot/gARYk/26/
HTML:
<div id="fancybox-title-div">
<div class="left"></div>
<div class="right">
<span>text</span><br /><a href="'+link+'" >view comments</a>
</div>
</div>
CSS:
#fancybox-title-div {
border: 1px solid black;
min-height: 40px;
width: 50%;
margin-left: auto;
margin-right: auto;
}
#fancybox-title-div .left {
display: inline-block;
vertical-align: middle;
height: 50px;
width: 25px;
background-color: blue;
}
#fancybox-title-div .right {
display: inline-block;
vertical-align: middle;
width: 70%;
border: 1px solid red;
}
If it matters, as it is this won't work in IE7. Here's a fixed version: http://jsfiddle.net/gARYk/27/
jsfiddle.net/gARYk/10 .... This is what you are looking for.