I'm having a little trouble centering a div both horizontally and vertically. I've had a quick look around and can't really make much sense of other answers, so I thought I would post my own question.
What I am looking to do is center my div with text horizontally and vertically however I need the container div to stay perfectly sized to the window.
Here is the css I'm having trouble with.
body{margin:0 auto;}
div#section1 {height: 100vh;background: black;}
Also, here's a link to JSFiddle, I couldn't post HTML in here for some reason, the "Post" button would grey out.
Thanks
same: use vertical-align: middle.
body {
margin:0 auto;
color:white;
width: 100%;
display: table;
}
div#section1 {
height: 100vh;
background: black;
display: table-cell;
vertical-align: middle;
}
.center {
text-align: center;
}
Working Fiddle
All you need to do is to use the block of code below with margin: auto; which is important there.. Rest, playing with CSS positioning will do the job for you.
I don't think there's much to explain here, just make sure you use position: relative; for the container element so that your absolute positioned element stays correctly
div#section1 {
height: 20vh;
background: black;
width: 20vh;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}
Demo
You can refer my other answer here which will explain you some other techniques to achieve vertical alignment, because horizontal is quiet easy using margin: auto;
Related
So, currently, I have three buttons down one side and when I reduce the screen size, they stay there, after flexing and putting fixed widths on them. Here is the CodePen, if anyone could have a look for what I am missing.
I have this for now which I thought would work:
.buttons {
width: 100%;
}
.button-container {
width: 100%;
margin: auto;
}
.button-strip img {
width: 30%;
float: left;
overflow: hidden;
}
Still very new to all of this :)
Some images aren't showing up on the CodePen you linked, but here's what I worked out, perhaps it's what you're looking for:
.button-strip {
width: 30%;
display: inline-block; /* Stop them from breaking lines */
}
.button-container {
width: 100%;
text-align: center; /* Not really required, but I thought it looked best centered */
}
This is what it looks like to me, so hopefully I could still manage to help you
I am making an animation that involves a set of four divs inside one larger div. The four divs are too large to all fit in the one div at once, so I want to be able to specify the position at which the larger div should start. For example, here I have four boxes inside the div. From top to bottom, the boxes are green, purple, pink, and blue (you can't see the blue in the current jsfiddle because it is cut off). I would like the BOTTOM of the larger fulldisplay div to align with the MIDDLE of the blue box, and everything else to fit above hat until it is cut off at the top of the div. Eventually I am going to be implementing a custom-made scroll button (as I don't want it to look like the overflow:scroll one) but for now I am just trying to get CSS to display the inner divs the way I want.
JS FIDDLE: http://jsfiddle.net/o33gw35w/
CSS:
body {padding: 0; margin: 0; height: 100%; overflow: hidden; font-family: Helvetica;}
.nameblock {
height:10%;
width: 30%;
position: absolute;
background-color: yellow;
}
.fulldisplay {
height:90%;
width: 30%;
position: absolute;
overflow: hidden ;
}
.spacer1 {
height:40%;
position: relative;
background-color: green;
}
.spacer2{
height:40%;
position: relative;
background-color: purple;
}
.spacer3 {
height:40%;
position: relative;
background-color: pink;
}
.spacer4{
height:40%;
position: relative;
background-color: blue;
}
HTML:
<div class="nameblock"></div><br/>
<div class="fulldisplay">
<div class="spacer1">
</div>
<div class="spacer2">
</div>
<div class="spacer3"></div>
<div class="spacer4"></div>
</div>
</body>
Apologize if I got the question wrong as I am not quite sure what you are trying to do, but if you want to have a way of ordering s dynamically, you could use css flexbox to do so. You might need to tweak the classes to have correct width and height (eg. width: 100%; height: 150px;) and define flex container as similar to below snippet.
.fullconversation {
padding: 0;
margin: 0;
list-style: none;
width: 30%;
display: flex;
flex-direction: row;
-webkit-flex-flow: row wrap;
justify-content: space-around;
}
and then
.spacer4{
width: 100%;
height: 150px;
position: relative;
background-color: blue;
order: -1;
}
For more information about flexbox, please refer to the urls below or feel free to ask any questions regarding flexbox or css. Hope this helps.
https://css-tricks.com/almanac/properties/o/order/
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
***********Updated************
If you change the height of spacer1 to be 10%, then you will see the blue box visible at the bottom. Note that the value 10% is just an example, as long as the total size of the heights of inner s dose not take up more than 100%, the blue box will be visible.
.spacer1 {
height:10%;
position: relative;
background-color: green;
}
Also, if you want to see all divs regardless of the size, you could just set overflow to other than hidden.
While creating a HTML layout, I noticed some strange positioning issue I was unable to solve.
Take the following HTML:
<div class="outer-wrap">
<div class="header">
I am a Header
</div>
<div class="element">
Hello world
</div>
And combine with this CSS code:
#import "https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.2/normalize.css";
html, body { height: 100%; }
.outer-wrap {
width: 100%;
height: 100%;
display: table;
background: grey;
}
.element {
display: table-cell;
vertical-align: middle;
background: blue;
}
.header {
position: absolute;
background: red;
}
Fiddle
As you can see, I've set the wrapper to display: table, which enables me to vertically center any child element with setting display: table-cell and vertical-align: middle.
Now when I try to add a header, strange things start to happen.
First, I have to declare position: absolute on the header, otherwise the header horizontally pushes away .element. I don't know why this happens, but I understand why this fix works: Because position: absolute takes things 'out of the flow'.
But if I take a look at the Fiddle, you'll notice a small gap on the left side which exposes the grey background color defined on .outer-wrap:
What is causing this gap & how to fix this?
Why do I have to use absolute positioning on the header to make it expand to the full container width?
The key reason causing that is you're not defining the table-cell div and would not be 100% wide and you see its shifting towards right seeing the gray border color which is the background of outer-wrap div. So, you need to define the width:100%; when you use display:table-cell; to make it display correctly.
Changed css:
.outer-wrap {
width: 100%;
height: 100%;
display: table;
background: grey;
}
.element {
display: table-cell;
vertical-align: middle;
background: blue;
width: 100%;/*explicitly define width to be 100%*/
}
.header {
position: absolute;
background: red;
z-index: 1;/*to make it display in front*/
}
Fixed fiddle
This question already has answers here:
How do I vertically align text in a div?
(34 answers)
Closed 8 years ago.
Here is what I have right now. In other divs using vertical-align:middleand setting the line-height to the same value as the height property it should work!The only thing is that in those divs I used pixel dimension and not percentages. Can anybody tell me why this wont work with percentages? also setting the text-sizeto 50% should also make text half the size of the div but it is really really small still? What is going on here?
#chooseStateAlabama {
width: 20%;
height: 25%;
top: 0;
left: 0;
position: absolute;
background: url(../_images/_unitedStates/_states/chooseStateAlabama.png);
background-size: 100% 200%;
float: left;
color: #FFFFFF;
font-family: Arial;
font-style: normal;
font-weight: bold;
font-size: 50%;
line-height: 25%;
text-align: center;
vertical-align: middle;
}
You can use display:inline-block , height:100% and vertical-align:middle to a single element or pseudo element aside the text (before or after): DEMO
#chooseStateAlabama:before {/* this can be an extra tag within HTML structure if pseudo used for other purpose */
content:'';
display:inline-block;
height:100%;
vertical-align:middle;
}
If you happen to have more content or more than 1 line, then use an element to wrap it as well and apply to it display and vertical-align. DEMO2 to see behavior
If you can alter the markup you can use quite a few ways to get the result you want.
http://jsfiddle.net/vvpn6cge/
Because you have text ( that could be one or many lines long I guess) then you could get the result using CSS table cells (see the fiddle).
.outer-container {
display: table;
width: 100%;
}
.txt-vertical-align {
display: table-cell;
text-align: center;
vertical-align: middle;
}
As a further alternative, you might use flexbox
display: flex;
justify-content:center;
align-content:center;
flex-direction:column;
(stolen from this stackoverflow question)
http://jsfiddle.net/L85h8vvj/7/
HTML
<body>
<div class='container4'>
<div>Example :)</div>
</div>
</body>
CSS
body{
margin:0px;
}
div.container4 {
height: 100%;
width:100%;
position: absolute;
}
div.container4 div {
margin: 0;
background: yellow;
position: absolute;
top: 50%;
left: 50%;
margin-right: 50-%;
transform: translate(-50%, -50%)
}
i have a problem with aligning.
This is my code.
Html:
<div id="alt">
<p>this is a sample text</p>
</div>
Css:
#alt{
display:block; position: absolute; top: 400px; left:500px; }
on using code everything looks fine. But when I reduce the zoom level of the browser. Its goes to the left. I want it to remain in the centre. Help me in solving this.
For aligning website content to center,you have to put all content in one div say main div and apply a below css to it
.main
{
margin-left:auto;
margin-right:auto;
width:960px;
}
use left:50% instead of left:500px;
css:
#alt{
display:block; position: absolute; top: 400px; left:50%; }
If your container div has a fixed width then use margin: 0 auto;
Fiddle: http://jsfiddle.net/X6Vxq/show
Try the following style.
#alt
{
display:block;
text-align: center;
top: 400px;
left:500px;
}
#alt p
{
margin: 0 auto;
display: inline-block;
}
If your content is present in a div, then you can give the position relative to the div and margin left and right to auto. Check the following code:
#alt {
position: relative;
margin-left: auto;
margin-right: auto;
}
This is a hard one to answer, since you don't seem to have given us enough info. Would you like the paragraph center justified or left-justified in a centered column?
To center justify, you can simply use:
#alt { text-align: center }
To create a centered block with the text left justified, use:
#alt {
width: 800px; /* Your desired width of the center block */
margin: 0 auto;
}
Hope this helps