I have two columns (div { float: left; }, as you may know) in the Bootstrap Structure. The problem is to make the content inside one div go the middle (vertical). So, it doesn't matter the height of the second columns, the second column will always be on the middle.
It is not an line of text. In my case will be an image and a title. Two blocks of elements.
Here's the example: http://jsfiddle.net/almino_melo/L4rK5/.
I tried to put another div inside it with display: table; rule and then another one with display: table-cell; and vertical-align: middle;. But it didn't work.
Here's my updated fiddle, http://jsfiddle.net/L4rK5/9/ , it does what you ask but does seem really rather crude, note the change in the html div structure as well as the following css rules.
.text-center{
width: 100%;
position: absolute;
top: 50%;
}
Related
This question already has answers here:
Using display inline-block columns move down
(2 answers)
Closed 8 years ago.
I have a web page of the following layout.
The sidebar on the left is of the following css:
.sidebar {
display: inline-block;
top: 0;
width: 200px;
height: 1000px;
}
and the content on the right of css:
.content { position: relative; display: inline-block; }
But on adding any content inside the sidebar, the layout becomes:
The sidebar goes downwards and can't even make it go up by changing the 'top' value.
How can i Align a sidebar successfully in the left side of the content?
You should use vertical-align: top; declaration instead for both inline block columns to keep them at the top, as follows:
.sidebar, .content {
vertical-align: top;
}
'vertical-align'
This property affects the vertical positioning inside a line box of
the boxes generated by an inline-level element.
top
Align the top of the aligned subtree with the top of the line box.
CSS top property is only applicable to none-static positioned elements. It doesn't have any effect on inline-blocks or any other inline level elements.
Try adding vertical-align: top;
try to use the fixed property:
posistion: fixed
Try to check the width of oyu content, if it properly fits into this 200px width.
If you have firebug on your browser should give a good hand on debuging it.
You need to use some sort of position rule or your top value has no effect. I would use position: absolute; . Using fixed is not ideal.
I was trying to center text in two adjacent divs and I can not understand what I am doing wrong.
Basically I have 2 divs each taken 50% of the window. The first div contains an image (which I successfully centered) and I am trying to center the text in the second div. So here is my Fiddle and I am using the following css:
.thumbnail-descr{
text-align: center;
min-height: 10px;
display: table-cell;
vertical-align: middle;
font-size: 26pt;
color: #bbb;
}
There is no point of having original DOM structure or CSS (the main thing is to have 2 divs taking all the width and one has a centered image another one has a text. How can I achieve it?
What I understand from the example is that you want to vertically center "Descr". There are several tricks to do that:
Adjust the padding and use box-sizing border-box to have better control of the height.
Use flexbox (still not broadly available): https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes
If you know before hand that you'll have only one line of text you can use line-height.
(See the update for another option)
For example see this Fiddle:
.square{
width: 45%;
height: 200px;
border: 3px dotted #ddd;
display:inline-block;
margin: 0 10px 0 10px;
line-height: 200px;
}
But take a few things into account:
This will work only if you have one line of text, because on text wrap it will be broken.
This is not the normal use of line height, it's taking advantage of a side effect: text is vertically centered to the line-height.
This trick is used by some CSS frameworks (ie Bootstrap) to center the text on some components.
Update
I forgot another option, since you have one div inside the other you can use position: relative on the parent, and use absolute position for the child using top: 50% and a negative top margin. You'll need to setup the top margin to the half of the child height. (that's how modals are usually centered):
.square { position: relative; /*..*/ }
.thumbnail-descr{
position: absolute;
top: 50%;
margin-top: -10px;
/*...*/
}
See http://jsfiddle.net/diegof79/M4fKM/1/
Also you asked why your solution is not working... this can help to understand the reasons: http://phrogz.net/css/vertical-align/index.html
Before proceeding to giving you the solution, you could have he exact same result with a lot less code, giving so many classes for so little content can only lead to huge code.
The span class you are giving the text-align:center, doesn't fill up the whole width of the parent, so, where would it center the text since its width is equal to the text?
You can either put a 'text-align:center" to the span's parent, the square class, but I would use a different approach in general.
Not sure if you need a span.
If you remove span tag and use same css for the div styles, or simply ad a span class name to a your div class name- works perfectly.
i think the issue happen because the width in the description div
Try this suggestion:
warp the with div, the div will use thumbnail-descr class
<div class='square'>
<div class="thumbnail-descr"><span>Descr</span><div>
</div>
Update the thumbnail-descr
.thumbnail-descr{
text-align: center;
min-height: 10px;
background-color:red;
vertical-align: middle;
font-size: 26pt;
color: #bbb;
width:100%;
}
hope this help
I am creating a simple site and I found out that I can center <img> tags with text-align: center; but id does not work on block elements like <div> for example. Can someone explain to me how exactly the text-align works and if it's god practice to use it to align images?
Thank you very much in advance :)
UPDATE
I also know about the margin: 0 auto; which in some situations works and in other situations it refuses to center elements.
It totally depends on your requirement, there are various ways to do so, one is that img is an inline element, so setting it to block and using margin: auto; will center your img
img {
display: block;
margin: auto;
}
Demo
Another way is which you are trying to attempt, which needs text-align: center; to be declared on the parent element and not the img tag itself, cuz I doubt you are using text-align: center; for the img tag and not for the parent... Where in the above solution we are targeting the img tag, so there's a difference between the two..
Demo
What's the good point here?
You don't have to make the img a block level element.
No need of margin: auto;
What's the bad point here?
If you have p elements inside the div, they will be centered aligned as well, because the align property is inherited.
Demo
So what to do now? Align the p elements to the left using text-align: left; property, and here we will be targetting p like
This will keep the image centered and will align the p to the left
.wrap {
text-align: center;
}
.wrap p {
text-align: left;
}
Demo
Last but not the least, we can also use CSS Positioning where you can have a parent element set to position: relative; and than we use position: absolute; for the img tag, and than we assign top: 50% and left: 50% and than we deduct the 1/2 of total height and width of your img by using margin-top and margin-left properties respectively. This method comes handy in case where you need the image vertically as well as horizontally centered. (This method will require fixed height and width to be declared)
<div>
<img src="img.png">
</div>
img {
display: block;
margin-left: auto;
margin-right: auto;
}
My advice is to use text-align property for the texts only (of course there could be exceptions). And for centering images you can simply do like this:
img{
display: block;
margin: 0 auto;
}
A 'div', or any block element, without a declared width, can't be centered with margin: 0 auto;, but images will. 'Auto' counts pixels for you and make an element appear in the center
See W3:
http://www.w3.org/TR/CSS21/text.html#alignment-prop
Whether you want to use margin:0 auto; or text-align:center , this really depends on what you're doing exactly and the surrounding markup, context.
I always try to use text-align:center; when possible. I also define images as a block which helps auto margins.
Also a great article by Chris at CSS tricks: http://css-tricks.com/centering-in-the-unknown/
The property text-algin:center basically does what it says. Its supposed to center text. You can either apply directly to the text that you want to center or apply it to the parent div. In this case every text within this div will be centered.
The better practise to center, e.g., images, is to use margin: 0 auto; as many have already suggested. Specifying auto tells the browser to automatically determine the left and right margins itself and to set them equal. It therefore guarantees that both margins have the same size, which is why the object is centered horizontally.
Hope that helps!
When centering things in html and css, I find two approaches - either applying on the element :
display:block;
margin:0 auto;
or using:
display:inline-block;
text-align:center; (on the parent element)
I always wonder which is better and why. Thanks!!
This is a classic and important question.
Elements can either be inline (meaning they all sit next to each other - like a span tag) or they can be block (meaning the stack up on top of each other - like a div tag).
Margin: auto, while a bit odd when you first see it, is the best and only way to center a block level (position static), element.
For anything that is display: inline (like a span tag) - the only way to center it is if you specify text-align: center on the parent. This will center everything display: inline inside it that is position: static;
Display: inline-block is a hybrid of the two that is relatively new (but supported as far back as ie7 if you use the hack mentioned in another answer). With inline-block, you get the benefits of inline, in that you can you stick a bunch of things next to each other and have them all be centered (think of a nav where all nav items are all centered), but ALSO have each item take advantage of some of the stuff you get with display: block - the most important one being HEIGHT.
Imagine a scenario where each nav item has a background image that is 80px tall - you can't make an inline element have a height of 80 - so you'd have to make each element display: block - only then can you give it a height. So to make them all appear next to each other, you'd float them. The problem is if you float them, you can't have them all be centered on the page unless you give a fixed width to the nav and margin: auto THAT. This means the nav has a fixed width - might be okay, but there are times when the nav has to have dynamic elements, different widths for different languages, etc.
Enter display: inline-block.
Block elements should always be centered using
.block {
margin-left: auto;
margin-right: auto;
width: 600px;
}
as stated by the w3c: http://www.w3.org/Style/Examples/007/center.en.html#block
text-align: center;
is well-named: use it to center texts.
Update
You can also use display: flex now:
.parent {
display: flex;
justify-content: center;
}
.block {
width: 200px;
}
There is no better way in this situation both approach will work and both are corrected. Just one thing display:inline-block doesn't work on IE7 (if you support this browser) you will need a hack to make it work
display: inline-block;
*display: inline;
zoom: 1;
I have the following situation:
A variable height div (#container) with an image on the inside (image that is placed within another div) that I need to float:right and align vertically in the middle. How to do this?
Thanks.
EDIT:
Maybe I didn't make it clear enough that i do not know beforehand how much content the container has, from a few lines to a wall of text, so any solution relying on its height won't work (and that's my problem :P)
This is a fiddle with an example of possible content to which align the image: http://jsfiddle.net/9DbmN/
You should take a look at Centering in the Unknown by Chris Coyier. Imo it´s a pretty solid solution to the holy grail of vertical centering.
I would not discourage using tables here))) If you use a two-cell table with vertical-align: middle set on its td elements - it will perfectly (and easily!!!) solve your problem.
If you want to have two containers, one of which (the one with the image) will be floated to the right and needed centering - I'd say you'll have to avoid using float property for this. Because a) as far as I understand you don't need you content on the left to be UNDER the image, right? b) floats are block-level elements and you can't change it even if you set display: table-cell, the browser will still render it as display: block - which leads me to the conclusion that you won't manage to center it by css (at least by the means I'm aware of).
If you don't need ie7 support a possible workaround might be this:
html:
<div id="container">
<div class="content">Content goes here, vertically aligned with the image</div>
<div class="i_used_to_be_floated_right">Image goes here</div>
</div>
css:
#container {
display: table;
width: 100%;
}
.content, .i_used_to_be_floated_right {
display: table-cell;
vertical-align: middle;
}
.content {
background: green;
width: 80%;
}
.i_used_to_be_floated_right{
background: red;
width: 20%;
}
The working example live can be seen here: http://jsfiddle.net/skip405/sDXMj/1/
But if you need ie7 - I would vote for the table-solution I stated at the very beginning.