I need to make a website and there is a button which is in the middle horizontally. I can use left 50% or margin-left but when I minimize the window - it isn't in the middle. How do I set the div to be exactly in the middle also when you minimize the window of the browser?
Edit: fixed it by doing as Trix said and adding
.center-div{
margin: 0 auto;
}
If your div has a width value, you may use:
CSS
.center-div{
width: 100px;
margin: 0 auto;
}
But, if not, you may add text-align: center to its parent and display: inline-block; to the centering div itself:
HTML
<div class="parent">
<div class="center-div">
</div>
</div>
CSS
.parent{
text-align: center;
}
.parent .center-div{
display: inline-block;
}
Related
I am struggling centering content vertically. Here is a screenshot:
I need a float left as there will be more content on the side which you can't see but yeah how can I get this text to vertically be in the center? Also I am not sure if I do need a tag in the tag
.newsletter_text_section {
width: 40%;
float: left;
padding: 15px;
font-size:24px;
padding-right: 0 !important;
display: inline-block;
height: 100%;
vertical-align: middle;
}
.newsletter_text_section p {
font-size:24px !important;
display: inline-block;
vertical-align: middle;
}
<!-- newsletter section -->
<div class="newsletter_section">
<div class="newsletter_text_section">
<p>Join Balance and get 20% off your first order</p>
</div>
<div class="newsletter_gif_section">
...
</div>
<div class="newsletter_input_section">
...
</div>
</div>
To solve this, the faster way is to set the same pixel for height and line-height of the element. Like this:
.box{
height : 10vh;
line-height: 10vh
}
Otherwise, you can also display: flex to layout your page, in flex scope, you can use align-item to align element vertically like this :
.box {
display: flex;
align-items: center;
justify-content: center;
}
For more detailed information, you can refer to here.
The next method is to adjust padding to your parent element since you are using the percent unit, but I don't recommend this way due to it exist side-effect sometimes.
The above content is what I think so now, hope it can help you.
Add This To The Style Of The Element:
position: absolute;
top: 50%;
Thanks,
Kamesta
is there a way to do margin-right auto (always move div to right). I tried margin-right: auto; and margin: 0 0 0 auto; didn't work.
Margin parameter work like this :
margin : top, right, bottom, and left,
So it should be: 0 auto 0 0
by the way flex is also a very nice position :
.one{
display: flex;
width:100%;
justify-content: flex-end;
background-color:red;
}
.element-right{
width: 50px;
background-color: blue;
}
<div class="one">
<div class="element-right">BOX</div>
</div>
You can achieve that as well with a little help from a wrapper over your original div:
HTML:
<div class="right-wrapper">
<div class="right">
</div>
</div>
CSS:
.right-wrapper {
text-align: right;
}
.right {
display: inline-block;
}
This works because the contents of the parent .right-wrapper are set to behave like text while keeping their block behavior (display: inline-block). This causes the child div to react to parent's text-align: right.
In some cases you might find that the child div is inheriting a width property and is full width. It's useful to then set child's width property to auto in case the child element is supposed to be some sort of a button or other, smaller element aligned to the right side.
.right {
display: inline-block;
width: auto;
}
You can use margin-left: 100%. If you want to define other margin values, you can use the shorthand margin: 0 0 0 100%, for example. This will "push" the div to the right of the container.
You could always use the text-align method on divs
.parent{
text-align: right
}
.child{
display: inline-block
}
.parent {
width: 100%;
height: 40px;
background: #000;
display: flex;
justify-content: flex-end;
}
.parent .child {
width: 100px;
height: 100%;
background: blue;
}
<div class="parent">
<div class="child"></div>
</div>
I want to center a DIV within a parent DIV. I have tried using the recommende dsolution on SO -- How to horizontally center a <div> in another <div>?, but its not centering it. The basic layout is this
#revealScoreMobile {
padding: 10px;
display: block;
text-align: center;
width: 100%;
}
.stats {
text-align: center;
width: 100%;
background-color: red;
margin: 0 auto;
}
<div id="revealScoreMobile">
...
<div class="stats" style="">
<div class="score">5.0</div>
(<span class="votesCast">1</span> votes cast)
</div>
</div>
and yet as you can see from the Fiddle -- https://jsfiddle.net/5Lgu0uw3/2/, the child DIV is not centering within the parent, despite the fact I have
text-align:center;
in there. What gives? What else do I need to do to center that DIV within its parent?
I am not completely sure what you want, but if you want the inner DIV NOT have the full width, but only as much as its text contents require, make it an inline-block and erase the widthsetting (or give it a widthsetting less than 100%). inline-blocks are affected by text-align: center
(note that I erased some superfluous settings, but put the ... content into its own DIV, since it otherwise would be on one line with the subsequent inline-block.
#revealScoreMobile {
padding: 10px;
text-align: center;
}
.stats {
display: inline-block;
text-align: center;
background-color: red;
}
<div id="revealScoreMobile">
<div> ... </div>
<div class="stats" style="">
<div class="score">5.0</div>
(<span class="votesCast">1</span> votes cast)
</div>
</div>
As others have suggested in the comments, text-align: center; only applies to text content, not the inner div.
Your CSS applies width: 100%; to .stats which is forcing it to take up the full width of it's parent container #revealScoreMobile, which is also width: 100%;. Secondly it needs display: inline-block; to override the previous display: table-cell; as present in your jsfiddle example.
Replace in your CSS:
.stats {
display: inline-block;
text-align: center;
background-color: red;
margin: 0 auto;
}
I have two questions. Essentially, I want to display an image in its original size and place it in the middle of the screen(by middle I mean in the "horizontal" middle not the center of the screen), and then place a div with texts right below this image. This is the code I use:
<div class="figure">;
<img src="...">;
</div>';
<div class="text">
text here
</div>
This is the css:
.figure{
position:absolute;
margin:0 auto;
left:0;
right:0;
bottom:10px;
top:30px;
}
.figure img{
margin-left: auto;
margin-right: auto;
display: block;
height:100%;
width:100%；
}
I have two questions. The first one is when the image height is theoritcally longer than the screen height, there is no vertical scrollbar, the image just got resized to fit the screen. The second question is how can I place the text below the image without knowing the size of the image? I tried figcaption but it doesn't work.
To make it perfect center, you might need min-height: 100vh; and min-width: 100vw; then use display flex to center it. Otherwise, you might not center it vertically.
Also, move your text block inside one div with the img.
by default, the img will not resize unless you specify it.
By default div has display block so it will take the whole row, with text-align: center; it will just center your text.
.figure {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
min-width: 100vw;
}
.centered {
text-align: center;
}
html,
body {
padding: 0;
margin: 0;
}
<div class="figure">
<div>
<img src="http://placehold.it/950x450">
<div class="centered">
text here
</div>
</div>
</div>
First of all I I assume this does what you have in mind.
html
<img src="https://static.tumblr.com/07f1e3ffdfdd03631d00e7792ea3fa93/mja6mxp/AUUna8jev/tumblr_static_tumblr_static_88o50pnpc3k04gw0ck888o80o_640.jpg"/>
<div class="text">Isn't that pretty!</div>
CSS
body {
color: #eee;
background-image: url("chrome://global/skin/media/imagedoc-darknoise.png");
}
img {
margin: 0 auto;
display: block;
}
.text {
margin: 0 auto;
display: table;
}
Your first question about why the image is resized when it's bigger than the page. I have to point out that in your CSS you set the image to be the 100% the of the possible width and height and by default, the images will be stretched to fit the element.
To answer your second question, because your "figure" div containing the img position is absolute it ignores the position of other elements. Change position to another type such as "position: relative" and it will position its self with other elements in mind.
I'm not the most confident in html and css skills but I hope my two cents at least helps you press on forward.
For some reason, margin:auto is not working.
HTML
<body>
<div id="background">
<div id="header">
<div id="title">Welcome</div>
</div>
</div>
</body>
CSS
#background {
min-width: 960px;
}
#title {
display: block;
margin: auto;
background-color: blue;
}
This just just draws a blue line across the top of the screen with the word 'Welcome' on the left. Why isn't my margin:auto working?
The correct syntax for horizontally centering via margin is: margin: 0px auto; as this will set the left and right margin to auto. You need to set a width on it if you use this approach, because the width is 100% by default.
Alternatively, you can also use text-align:center if you are just centering text.
Working jsFiddle using text-align:center.
Alternative jsFiddle.. I don't know what style you are trying to achieve.
The #title div will expand to fill its parent, #header, which in turn, expands to fill its own parent, #background, which has a width of at least 960px.
Therefore, #title if full width so it is centered, and by default, the text is left justified (at least in Western European languages).
If you want the #title to have a shrink-to-fit width, you can try display: inline-block.
To center #title horizontally, add text-align: center to its parent container, #header.
For example:
#background {
min-width: 960px;
}
#header {
text-align: center;
}
#title {
display: inline-block;
background-color: beige;
}
Alternatively, you can achieve the same result using display: table:
.ex2 #header {
text-align: left;
}
.ex2 #title {
display: table;
margin: 0 auto;
background-color: beige;
}
See demo at: http://jsfiddle.net/audetwebdesign/kAhnx/