In CSS, how can I center text around a specific word?
For instance, let's say I have the following DIV:
<div style="text-align: center;">
Previous Day | Navigation | Next Day
</div>
The text will technically be centered, but the word "Navigation" will NOT be in the exact middle. Rather, the middle will be exactly between the letters "v" and "i". This is because when centering text, the length of the entire string is taken into account.
How can I make the middle instead be between the "g" and the "a", using (preferably) only CSS? Modifying the HTML is also acceptable. As a last resort, I'm willing to use JavaScript, although only if it's kept simple, otherwise it's not worth it to use complex JavaScript for such a simple task.
Fixing the width of the elements containing "Previous Day" and "Next Day" is probably the simplest solution:
<div style="text-align: center;">
<div style="display: inline-block; width: 12em; text-align: right;">Previous Day</div>
<div style="display: inline-block;"> | Navigation | </div>
<div style="display: inline-block; width: 12em; text-align: left;">Next Day</div>
</div>
Fiddle here.
You can wrap your individual items in an HTML tag, like an anchor, and float them to achieve your desired result. Floating the tags places them side-by-side, and giving each item a percentage-width that collectively adds to 100% effectively centers the elements in their container.
Note, there are some pitfalls to using floats. You need to clear the parent div to properly lay out elements following a container with floated children. Also, if the child elements have any padding, this will be added to the percentage width and misalign the children unless you use box-sizing: border-box; on the child elements.
HTML
<div class="container">
Previous Day
<span class="separator">|</span>
Navigation
<span class="separator">|</span>
Next Day
</div>
CSS
.container {
color: white;
margin: 0 auto;
width: 80%;
min-width: 320px;
background-color: black;
overflow: hidden; /* to clear the div */
}
.container a {
text-align: center;
float: left;
width: 32%;
overflow: hidden;
background-color: orange;
}
.container .separator {
float: left;
text-align: center;
padding: .5%;
}
The colors are to show that it is centered in its parent element.
Here's a live demo jsFiddle
Related
Embarrassingly, I'm having trouble making one div (of any length) centered and one div (of any length) floating on the right. So I have a container with menu buttons that are centered and a link to the users control panel on the right. It should look something like this
----------------------------------------------------------------------------
| |----Menu Items----| |--ControlPanel--|
----------------------------------------------------------------------------
I know, this question has probably been asked a few times but I've searched through and through and they all seem to rely on percentages or fixed widths.
I have a container
.container {
height: 50px;
width: 100%;
padding: 10px 10px;
}
.menublock {
width: 200px;
margin: 0 auto;
padding: 0;
}
.controllinks {
float:right;
}
The html is like this
<div class="container">
<div class="menublock">
<span class="menuitem">Streams</span>
<span class="menuitem">Profile</span>
<span class="menuitem">Friends</span>
</div>
<div class="controllinks">
A link the users control panel
</div>
</div>
By changing menublock and controllinks to display:inline-block (or inline) I can get them on the same line just fine. .menublock does not seem to like being centered in this display and margin: 0 auto; doesn't work. I was messing around with .menublock display:table but that didn't want to stay on the same row.
Maybe it was too easy so you didn't even try it, but this fixed the thing in my test file: Just swap the order of <div class="controllinks"> and <div class="menublock">:
<div class="container">
<div class="controllinks">
A link the users control panel
</div>
<div class="menublock">
<span class="menuitem">Streams</span>
<span class="menuitem">Profile</span>
<span class="menuitem">Friends</span>
</div>
</div>
An easy solution is to use absolute positioning.
.container {
height: 50px;
width: 100%;
padding: 10px 10px;
/*this makes the child divs relative to the parent*/
position:relative;
}
.menublock {
width: 200px;
margin: 0 auto;
padding: 0;
}
.controllinks {
/*this puts the controllinks on the right.
Be warned, that if the page is too small, controllinks can no overlap on menublock.
This can be fixed with media queries.*/
position:absolute;
right:0px;
}
Both Merlin's and James' solutions worked well. They all achieved the same result.
Another solution I just found was adding text-align: center; to the .container class. It turns out inline elements respond to text-align (although it seems strange to think of divs in this way).
So I understand how to center images when there is only one
using the css code block and margin but when I do that the images become on top of each other. I can hardcode the margins by doing margin-left: 30px but I also want to consider different screen size will change how the image is positioned. I would want to center it for all screens.
#image {
block:
margin:
}
jsfiddle
A simple approach might be to wrap your a and img elements in a wrapper div and apply the following CSS:
.wrap {
border: 1px dotted blue;
display: table;
white-space: nowrap;
margin: 0 auto;
}
Your HTML would look like:
<div class="wrap">
<a href="http://www.commnexus.org/evonexus-companies/hush-technology/">
<img src="http://www.hush.technology/wp-content/uploads/2014/07/evobadge.png" height="75" width="75" id="evonexus" class="evonexus">
</a>
<a href="http://www.sdvg.org/thecool2014/" style="margin-left: 20px;">
<img src="http://www.hush.technology/wp-content/uploads/2014/07/cool-companies-2014.png" height="75" width="75" id="coolcompany" class="coolcompany">
</a>
</div>
You can control the spacing between a elements by adding a left margin to the second a (or a right margin to the first).
See demo: http://jsfiddle.net/v9LBZ/
How This Works
What is needed here is a block level container that can shrink-to-fit the width of the two logos, and display: table will do that. You can then apply margin: 0 auto to center the CSS table.
However, to prevent the CSS table from wrapping the two a elements into a single narrow column (trying to get the smallest width), you need to add white-space: nowrap to keep all the inline a elements on a single line.
You could leave them inline elements and wrap them in a container element with text-align: center applied. See this fiddle.
You could wrap your image in div then use float css property to achieve this :
http://jsfiddle.net/b7TQs/1/
.left, .right{
width: 50%;
text-align: center;
}
.left {
float: left;
}
.right {
float: right;
}
I am a relative novice in the world of CSS so please excuse my ignorance! I am attempting to use the following CSS to align two divs horizontally:
.portrait {
position: relative;
display:inline-block;
width: 150px;
height: 200px;
padding: 20px 5px 20px 5px;
}
.portraitDetails {
position: relative;
display:inline-block;
width: 830px;
height: 200px;
padding: 20px 5px 20px 5px;
}
Unfortunately, unless I remove the display: inline-block from the .portrait class and replace it with float:left the .portraitDetails div block appears underneath the first div block. What on earth is going on?
Since you provided a working example, the problem seems to be more clear now.
What you have to do is simply remove display: inline-block and width: 830px properties from the right div. Of course remember to NOT add the float property to it.
People sometimes forget what is the purpose of the float property. In your case it is the image which should have float property and the image only. The right div will remain 100% wide by default while the image will float it from the left.
HINT: If the text from the div is long enough to float underneath the image and you want to keep it "indented" at the same point then add the margin to the div with a value equal to the image's width.
The problem with display: inline-block; is that the siblings having this property are always separated by a single white-space but only if there are any white-spaces between their opening and closing tags.
If the parent container has fixed width equal to the sum of the widths of these two divs, then they won't fit because this tiny white-space pushes the second div to the next line. You have to remove the white-space between the tags.
So, instead of that:
<div class="portrait">
...
</div>
<div class="portraitDetails">
...
</div>
you have to do that:
<div class="portrait">
...
</div><div class="portraitDetails"> <!-- NO SPACE between those two -->
...
</div>
Currently, I'm working on a navigation and I've encountered this issue:
The content of the navigation is floated to left. When I try to set the background color for the navigation itself, it does not work. Look at this example:
http://cssdeck.com/labs/qknohqxe
When the float:left is removed, the background color becomes visible, however, the "form" of the navigation is destroyed.
I'm pretty sure I'm missing an important point as I'm trying to reach to this simple point where both form and background color are preserved as I wanted.
My guess is that, there is a relation between the floated content, and the size of the carrier (#nav in my case).
Needing suggestions/workarounds for this issue.
Add this to .group:
overflow:auto;
That's it.
There is also another solution: adding a clear:both; element after all floating divs. But it's a bit more dirty:
<div class="container">
<div class="floating div"></div>
<div class="floating div"></div>
<div class="floating div"></div>
<div style="clear:both;"></div>
</div>
It always happens when you use floating divs. The container doesn't care about floating elements so it is like an empty container unless you use one of the mentioned solutions.
On the parent container (.group in your case), add overflow: auto or set a fixed height.
This happens because floated, as well as absolutely positioned elements are, by default, excluded from the document flow and thus are ignored when positioning the following elements.
Add a height to your .group.
.group{
height: 300px;
background-color: blue;
}
When you float objects it takes it out of the document flow. Meaning the parent object has no relation to the height of the child elements.
By setting a height you're forcing the container to go down.
Alternatively you can add an overflow to the container .group to force it to look for the height.
.group{
overflow: hidden;
background-color: blue;
}
Here's working CSS declaration.
.group{
background-color: blue;
float: left;
width: 200px;
}
You need to understand floating and positioning of nested elements.
Just add a clear both; to an extra element:
<div id="nav">
<div class="group">
<div class="button">Button1</div>
<div class="button">Button2</div>
<div class="button small">Button3</div>
<div class="button small">Button4</div>
<div class="button">Button5</div>
<br class="clear" />
</div>
</div>
#nav{
width: 240px;
}
.button{
float:left;
border-radius: 20px;
width: 200px;
height: 50px;
margin-top: 10px;
background-color: red;
text-align: center;
line-height: 50px;
}
.group{
background-color: blue;
}
.small{
width: 100px;
}
.clear
{
clear: both;
}
I have the page structure as:
<div class="parent">
<div class="child-left floatLeft">
</div>
<div class="child-right floatLeft">
</div>
</div>
Now, the child-left DIV will have more content, so the parent DIV's height increases as per the child DIV.
But the problem is child-right height is not increasing. How can I make its height as equal to it's parent?
For the parent element, add the following properties:
.parent {
overflow: hidden;
position: relative;
width: 100%;
}
then for .child-right these:
.child-right {
background:green;
height: 100%;
width: 50%;
position: absolute;
right: 0;
top: 0;
}
Find more detailed results with CSS examples here and more information about equal height columns here.
A common solution to this problem uses absolute positioning or cropped floats, but these are tricky in that they require extensive tuning if your columns change in number+size, and that you need to make sure your "main" column is always the longest. Instead, I'd suggest you use one of three more robust solutions:
display: flex: by far the simplest & best solution and very flexible - but unsupported by IE9 and older.
table or display: table: very simple, very compatible (pretty much every browser ever), quite flexible.
display: inline-block; width:50% with a negative margin hack: quite simple, but column-bottom borders are a little tricky.
1. display:flex
This is really simple, and it's easy to adapt to more complex or more detailed layouts - but flexbox is only supported by IE10 or later (in addition to other modern browsers).
Example: http://output.jsbin.com/hetunujuma/1
Relevant html:
<div class="parent"><div>column 1</div><div>column 2</div></div>
Relevant css:
.parent { display: -ms-flex; display: -webkit-flex; display: flex; }
.parent>div { flex:1; }
Flexbox has support for a lot more options, but to simply have any number of columns the above suffices!
2.<table> or display: table
A simple & extremely compatible way to do this is to use a table - I'd recommend you try that first if you need old-IE support. You're dealing with columns; divs + floats simply aren't the best way to do that (not to mention the fact that multiple levels of nested divs just to hack around css limitations is hardly more "semantic" than just using a simple table). If you do not wish to use the table element, consider css display: table (unsupported by IE7 and older).
Example: http://jsfiddle.net/emn13/7FFp3/
Relevant html: (but consider using a plain <table> instead)
<div class="parent"><div>column 1</div><div>column 2</div></div>
Relevant css:
.parent { display: table; }
.parent > div {display: table-cell; width:50%; }
/*omit width:50% for auto-scaled column widths*/
This approach is far more robust than using overflow:hidden with floats. You can add pretty much any number of columns; you can have them auto-scale if you want; and you retain compatibility with ancient browsers. Unlike the float solution requires, you also don't need to know beforehand which column is longest; the height scales just fine.
KISS: don't use float hacks unless you specifically need to. If IE7 is an issue, I'd still pick a plain table with semantic columns over a hard-to-maintain, less flexible trick-CSS solution any day.
By the way, if you need your layout to be responsive (e.g. no columns on small mobile phones) you can use a #media query to fall back to plain block layout for small screen widths - this works whether you use <table> or any other display: table element.
3. display:inline block with a negative margin hack.
Another alternative is to use display:inline block.
Example: http://jsbin.com/ovuqes/2/edit
Relevant html: (the absence of spaces between the div tags is significant!)
<div class="parent"><div><div>column 1</div></div><div><div>column 2</div></div></div>
Relevant css:
.parent {
position: relative; width: 100%; white-space: nowrap; overflow: hidden;
}
.parent>div {
display:inline-block; width:50%; white-space:normal; vertical-align:top;
}
.parent>div>div {
padding-bottom: 32768px; margin-bottom: -32768px;
}
This is slightly tricky, and the negative margin means that the "true" bottom of the columns is obscured. This in turn means you can't position anything relative to the bottom of those columns because that's cut off by overflow: hidden. Note that in addition to inline-blocks, you can achieve a similar effect with floats.
TL;DR: use flexbox if you can ignore IE9 and older; otherwise try a (css) table. If neither of those options work for you, there are negative margin hacks, but these can cause weird display issues that are easy to miss during development, and there are layout limitations you need to be aware of.
For the parent:
display: flex;
For children:
align-items: stretch;
You should add some prefixes, check caniuse.
I found a lot of answers, but probably the best solution for me is
.parent {
overflow: hidden;
}
.parent .floatLeft {
# your other styles
float: left;
margin-bottom: -99999px;
padding-bottom: 99999px;
}
You can check other solutions here http://css-tricks.com/fluid-width-equal-height-columns/
Please set parent div to overflow: hidden
then in child divs you can set a large amount for padding-bottom. for example
padding-bottom: 5000px
then margin-bottom: -5000px
and then all child divs will be the height of the parent.
Of course this wont work if you are trying to put content in the parent div (outside of other divs that is)
.parent{
border: 1px solid black;
overflow: hidden;
height: auto;
}
.child{
float: left;
padding-bottom: 1500px;
margin-bottom: -1500px;
}
.child1{
background: red;
padding-right: 10px;
}
.child2{
background: green;
padding-left: 10px;
}
<div class="parent">
<div class="child1 child">
One line text in child1
</div>
<div class="child2 child">
Three line text in child2<br />
Three line text in child2<br />
Three line text in child2
</div>
</div>
Example: http://jsfiddle.net/Tareqdhk/DAFEC/
Does the parent have a height? If you set the parents height like so.
div.parent { height: 300px };
Then you can make the child stretch to the full height like this.
div.child-right { height: 100% };
EDIT
Here is how you would do it using JavaScript.
CSS table display is ideal for this:
.parent {
display: table;
width: 100%;
}
.parent > div {
display: table-cell;
}
.child-left {
background: powderblue;
}
.child-right {
background: papayawhip;
}
<div class="parent">
<div class="child-left">Short</div>
<div class="child-right">Tall<br>Tall</div>
</div>
Original answer (assumed any column could be taller):
You're trying to make the parent's height dependent on the children's height and children's height dependent on parent's height. Won't compute. CSS Faux columns is the best solution. There's more than one way of doing that. I'd rather not use JavaScript.
I used this for a comment section:
.parent {
display: flex;
float: left;
border-top:2px solid black;
width:635px;
margin:10px 0px 0px 0px;
padding:0px 20px 0px 20px;
background-color: rgba(255,255,255,0.5);
}
.child-left {
align-items: stretch;
float: left;
width:135px;
padding:10px 10px 10px 0px;
height:inherit;
border-right:2px solid black;
}
.child-right {
align-items: stretch;
float: left;
width:468px;
padding:10px;
}
<div class="parent">
<div class="child-left">Short</div>
<div class="child-right">Tall<br>Tall</div>
</div>
You could float the child-right to the right, but in this case I've calculated the widths of each div precisely.
I have recently done this on my website using jQuery. The code calculates the height of the tallest div and sets the other divs to the same height. Here's the technique:
http://www.broken-links.com/2009/01/20/very-quick-equal-height-columns-in-jquery/
I don't believe height:100% will work, so if you don't explicitly know the div heights I don't think there is a pure CSS solution.
If you are aware of bootstrap you can do it easily by using 'flex' property.All you need to do is pass below css properties to parent div
.homepageSection {
overflow: hidden;
height: auto;
display: flex;
flex-flow: row;
}
where .homepageSection is my parent div.
Now add child div in your html as
<div class="abc col-md-6">
<div class="abc col-md-6">
where abc is my child div.You can check equality of height in both child div irrespective of border just by giving border to child div
<div class="parent" style="height:500px;">
<div class="child-left floatLeft" style="height:100%">
</div>
<div class="child-right floatLeft" style="height:100%">
</div>
</div>
I used inline style just to give idea.
I can see that the accepted answer uses position: absolute; instead of float: left. In case you want to use float: left with the following structure,
<div class="parent">
<div class="child-left floatLeft"></div>
<div class="child-right floatLeft"></div>
</div>
Give position: auto; to the parent so that it will contain its children height.
.parent {
position: auto;
}
.floatLeft {
float: left
}
I learned of this neat trick in an internship interview. The original question is how do you ensure the height of each top component in three columns have the same height that shows all the content available. Basically create a child component that is invisible that renders the maximum possible height.
<div class="parent">
<div class="assert-height invisible">
<!-- content -->
</div>
<div class="shown">
<!-- content -->
</div>
</div>