This question already has answers here:
How to vertically align an image inside a div
(37 answers)
Closed 8 years ago.
I'm currently trying to center an image inside a div that has it's dimensions set with vh. I tried using the display:table-cell; method which centered the image but began messing with the vw of other elements. I was wondering if there was another simpler way to be vertically centering this image inside a div that as vh. I know this might be a little confusing so hopefully my code down below can help!
Html:
<div class="graphic" style="background-color:#ff837b">
<img src="images/WAInduo-02.svg" style="width: 100%; height: 50%;" />
</div>
CSS:
#induoIntro .graphic {
display:block;
height:100vh;
}
It seems that vertical-align:middle has some inconsistency with vw unit. Try positioning approach.
Here is the solution for you.
CSS code:
.graphic {
display: block;
height: 100vh;
position: absolute;
top: 0;
bottom: 0;
width: 100%;
}
.graphic img {
vertical-align: middle;
width: 100%;
display: inline-block;
height: 50%;
position: absolute;
top: 0;
bottom: 0%;
margin: auto;
}
Here is the working fiddle
Related
This question already has answers here:
How to center an element horizontally and vertically
(27 answers)
Closed 3 years ago.
I am trying to center the disc in the middle of the page overlapping my left and right div. The way I have found to do it is using the below code however, the disc shoots off the page to the right when I do. Please can someone help me understand why as I have googled and watched YouTube videos and they say this is how you do it. It is even working in the YouTube video but not for me. I am really stuck.
body {
margin: 0;
}
.container {
height: 100vh;
display: flex;
}
.left {
width: 50vw;
display: relative;
background-color: #abc;
}
.right {
width: 50vw;
background-color: #687;
}
.disc {
width: 16em;
height: 16em;
border-radius: 50%;
background-color: black;
position: absolute;
top: 50%;
right: -8em;
transform: translateY(-50%);
}
<div class="container">
<div class="left">
<div class="disc"></div>
</div>
<div class="right"></div>
</div>
If I understood correctly you want to position the disc in the middle horizontaly.
If that's the case, you can use the right property in conjunction with the CSS calc function to get the desired behavior, like this:
...
.disc {
...
right: calc(50vw - 8em);
...
}
...
Where vw stands for viewport width and 8em is half of the disc width.
You can see the complete code here.
To position a child element, the parent element need to have a position attribute (position: relative; atleast) for its childs to inherit. That is why your .disc element went off to the right.
So simply add
position: relative;
to the parent elements, the .left and .right class
I hope this helps
This question already has answers here:
How to vertically center a container in Bootstrap?
(10 answers)
Closed 6 years ago.
I am trying to make a horizontally and vertically centered div which does not have 100% width and height, but something like 80% both width and height. I just want to make kind of a box right in the center of the viewport. I am avoiding vh and vw units.
I found a solution like this :-
<div class="centered-box">
This is a box
</div>
And the CSS is
.centered-box {
margin: auto;
top: 0;
left: 0;
right: 0;
bottom: 0;
position: absolute;
width: 80%;
height: 80%;
border: 1px solid black;
}
This works but when I use BootStrap3's .container class, this container misbehaves. The content also overflows. I think this is due to absolute positioning of the container. I just want a completely different concept. I dont want to use this method because of absolute positioning.
Try this
<div class="centered-box">
This is a box
</div>
Css
.centered-box {
margin: 10% auto;
width: 35%;
padding: 20px;
border: 1px solid black;
}
Html
<div class="outer">
<div class="middle">
<div class="inner">
<div align="center">
<h1>The Content</h1>
<p>Once upon a midnight dreary...</p>
</div>
</div>
</div>
</div>
Css
.outer {
display: table;
position: absolute;
height: 100%;
width: 100%;
}
.middle {
display: table-cell;
vertical-align: middle;
}
.inner {
margin-left: auto;
margin-right: auto;
width: /*whatever width you want*/;
}
Center div it's always a pain in the a**.
I found this very usefull site: http://howtocenterincss.com/
Give it a try.
You had tio answer very simple question about what you wont to center.
This question already has answers here:
Positioning <div> element at center of screen
(14 answers)
Closed 7 years ago.
I found a jquery code that rotate images inside a div and I want to position this div to the center of the page. I have this CSS for the images
#rotating-item-wrapper {
position: relative;
}
and this for the div
.rotating-item {
display: none;
position: absolute;
top: 150px;
left: 200;
}
How I manage to center the whole process to the center?
using margin and position tend to work in these sorts of situations:
HTML:
<div id="center-div"></div>
CSS:
#center-div {
position: relative;
margin: 0 auto;
width: 50px;
height: 50px;
background: red;
}
here's a jsfiddle: http://jsfiddle.net/mwyLz9rt/
Add this code to the div you wish to center:
.centered {
position: absolute;
margin-left: 50vw;
margin-top: 50vh;
transform: translate(-50%, -50%);
}
Also, next time try to provide us with a jsfiddle example so we could understand the problem more vividly :)
Here's a demo of the above code JSFIDDLE
This question already has answers here:
How can I vertically center a div element for all browsers using CSS?
(48 answers)
Closed 8 years ago.
I am new to CSS. I want to keep the div always at the center of the screen. I know by positioning we can achieve it but that is only when we have fixed width and height. What my requirement is, I want to have a div with fixed width but no fixed height. I want it to get adjusted to the center based on the content inside it using CSS.
You are looking for transform: translateY(-50%) property. Here is an example:
.main {
width: 200px;
position: fixed;
background-color: red;
position: fixed;
top: 50%;
left: 0px;
right: 0px;
transform: translateY(-50%);
margin: auto;
}
Working Fiddle
Just do something like this and you can be sure that it will always be in the middle.
HTML
<div id="outer">
<div id="content"></div>
</div>
CSS
* {
margin: 0 auto; /* centers everything except if otherwise floated
or affected by positioning positioning and margin property values */
}
#outer {
width: 200px;
height: auto;
}
#content {
width: 200px;
height: 100%;
position: absolute;
background-color: green;
bottom: 0;
}
See working example here
Solution: Wrapped the DIV in question in a none floated div that listen to the first block of CSS code and I didn't do anything that will affect its position.
This question already has answers here:
How do I vertically center text with CSS? [duplicate]
(37 answers)
Closed 8 years ago.
I have tried a couple of techniques, but so far nothing works to center text in an absolutely centered sphere. The size of the sphere is known, but not the length of the text. Here is an example that is lacking vertical alignment:
http://jsfiddle.net/eevw3oes/
css:
div
{
position: absolute;
border-radius: 50%;
top: 50px;
width: 100px;
height: 100px;
background: yellow;
overflow: hidden;
vertical-align: middle;
text-align: center;
}
Flexbox to the rescue: http://jsfiddle.net/eevw3oes/2/
div {
align-items: center;
display: flex;
…
}
This can also be accomplished by adding more DOM and using traditional css. I see you're trying to use vertical-align: middle, but that doesn't work on block elements (only with inline-block and table-cell).
Flexbox would work, and so will transforms:
<div class=circle style="left: 50px;">
<div class=text>
I'd like to be centered.
</div>
</div>
<div class=circle style="left: 200px;">
<div class=text>
I would like also like to be centerd. Even though I have long text. I would like to be centerd horizontally and vertically. Is that possible. Oh I wish it would work.
</div>
</div>
I've added inner <div> elements for the text. The CSS:
.circle {
position: absolute;
border-radius: 50%;
top: 50px;
width: 100px;
height: 100px;
background: yellow;
overflow: hidden;
padding: 20px;
}
div.text {
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
text-align: center;
height: auto;
}
CodePen.
I think you could add line-height with the same value as width
line-height: 100px;
See this Fiddle
Someone had already a similar problem on Stackoverflow.