Is it possible to have the content of a div vertically centred?
<div style="padding-left: 15px; vertical-align: middle; align-content: center" >
<h3>Selections</h3>
</div>
I want the text left aligned and in the vertical middle
I gave you an example of vertical alignment using flex rules. In this case, the vertical alignment occurs with the help of an align-item: center. Also, you need space for vertical alignment.
body {
padding: 0;
margin: 0;
box-sizing: border-box;
}
div {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
<div>
<h3>Selections</h3>
</div>
Well it's an easy property you can set. You can set the text-align property. You can read more about this below.
https://www.w3schools.com/cssref/pr_text_text-align.ASP
for vertical centering:
https://www.w3schools.com/css/css_align.asp
You want to use the CSS property text-align. Also remove the inline 'style' you have on your div and use a css file
.center-content {
text-align: center;
width: 100%;
}
<div class="center-content">
hello world
</div>
If you are oke with setting the height of the h3 tag, you can do this:
h3{
height: 4%;
margin-top: 48%;
margin-bottom: 48%;
}
Otherwise do this;
h3{
margin-top: 50%;
margin-bottom: 50%;
}
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
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 want to position my text exactly in the center of my background image without using and position relative or absolute. Most of the answers online use position absolute for the text and a top. But i don't want to use any positioning method of approach in my case.
Are they any other available approaches to position a child element in the center of a parent element?
.parent-element{
position:relative;
.child-element{
position:absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%)
}
}
Did you try:
margin: 0 auto;
text-align: center;
vertical-align: middle;
You can use also the inline margin(top,bottom,right or left) to positioning where you want your image. You simply have to put your margin with px(es margin:10px) and you can try this online on the browser(normally just press F12 and you have the screen with all information)
you can use flex for it.
.container {
display: flex;
width: 350px;
height: 350px;
background-image: url('http://www.intrawallpaper.com/static/images/abstract-mosaic-background.png')
}
.item {
background-color: white;
width: 80px;
height: 80px;
margin: auto;
}
<div class="container">
<div class="item">Sample Text</div>
</div>
Using Flexbox solves the issue quite easily
.test{
background-image:url("http://blogueandoalos50.com/wp-content/uploads/2015/01/fondo9.jpg");
height:200px;
display: flex;
align-items: center;
justify-content: center;
}
<div class="test">Hello World</div>
I have a dashboard I am setting up that has wrapper blocks with a sprite icon that should be centered vertically and horizontally inside its parent.
I got the blocks to be placed how I want and wrapping how I want using flexbox.
I also have the icon centered horizontally using the text-align property, but for some reason justify-content: center doesn't do anything when I add it to the .view or .sprite-icon elements; adding it to the .views element also doesn't center things how I want and it breaks the padding between the .view blocks.
See my JSFiddle I set up showing the issue here: https://jsfiddle.net/efarley/k0m4nxny/
.views {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-around;
}
.view {
height: 105px;
text-align: center;
width: 105px;
}
.sprite-icon {
background-image: url('http://67.media.tumblr.com/b2336d673e315081b6d657f8258c313d/tumblr_mv98xzSiJu1qhori9o1_500.jpg');
display: inline-block;
height: 35px;
width: 35px;
}
.sprite-icon.one {
background-position: 0 0;
}
.sprite-icon.two {
background-position: 0 35px;
}
.sprite-icon.three {
background-position: 0 70px;
}
<div class='views'>
<div class='view'>
<span class='sprite-icon one'></span>
</div>
<div class='view'>
<span class='sprite-icon two'></span>
</div>
<div class='view'>
<span class='sprite-icon three'></span>
</div>
</div>
You need to make your view a flex container, then add flex centering properties.
.view {
height: 105px;
text-align: center;
width: 105px;
display: flex; /* new */
align-items: center; /* new */
justify-content: center; /* new */
}
revised fiddle
Note that the justify-content property only applies to flex containers. In your question, you were applying it to a flex item. That's why it failed.
Learn more about flex centering:
How to Center Elements Vertically and Horizontally in Flexbox
Methods for Aligning Flex Items
Try these settings:
.sprite-icon {
display: block;
position: relative;
margin: 35px auto;
background-image: url('http://67.media.tumblr.com/b2336d673e315081b6d657f8258c313d/tumblr_mv98xzSiJu1qhori9o1_500.jpg');
height: 35px;
width: 35px;
}
margin 35px auto centers it horzontally (when position is relative) and moves it down 35px, which centers it vertically, but only since display is now block. I erased text-align: center in .view
Fiddle: https://jsfiddle.net/0t4vbzxb/1/
vertical-align has always given me problems in the past and once again I'm met with a problem that I don't know how to solve.
I have this html:
<ul id="council-slider">
<li class="col-md-12" style="display: block">
<img src="somesource" />
<div class="council-spacer"></div>
<p>text content goes here</p>
</li>
</ul>
CSS:
#council-slider {
margin: 0 auto;
list-style: none;
min-height: 300px;
max-height: 400px;
}
#council-slider li img {
float: left;
height: auto;
width: 25%;
margin: 5px;
}
.council-spacer {
height: 300px;
width: 100px;
float: left;
}
#council-slider li p {
margin-top: 100px;
}
I want to be able to vertically align the image in the middle. The text is multiple lines that wrapped so using line-height will not work in this situation. Also the images can have varying heights.
There are multiple list items; I just used one in the example to simplify and reduce the html.
You should read up on where the vertical-align property has the ability to be applied.
Quoting from MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align
The vertical-align CSS property specifies the vertical alignment of an inline or table-cell box.
Since your element is not being displayed as either inline or table-cell vertical-align: middle; will not do you any good here.
You can, however, set your <div> styling to display: table-cell; and then vertical-align: middle
Alternatively, this can be achieved with CSS3 as hars pointed out, just make sure your user's browsers support CSS3
.valign-middle {
position: relative;
top: 50%;
Transform: translateY (-50%);
}
The way this works -
Set position relative to the parent/container (i.e. <li> in your case)
Move the image that you want to vertically align, down 50% of the container height
Move the image up 50% of the height of the image
Add a class to your img as below.
.verticallyCenter {
position: relative;
top:50%;
Transform:translateY (-50%);}
Refer This
Without seeing your actual css code it is hard to say, but you should use vertical-align: middle for all objects that you want to align and you may need to change the display of your paragraph to display: table-cell.
Will be easier using flexbox: display: flex; and align-items: center;
Demo
#council-slider {
list-style: none;
}
#council-slider li{
display: flex;
margin: 10px 0;
align-items: center;
}
.council-spacer {
width: 20px;
}