Firstly my CSS skills are... a work in progress. But I have got so far in as to successfully have a bunch of list items arranged in a grid. http://jsfiddle.net/ashanova/Y4SR3/2/
What I'd like to do now is centre the list items. I have tried to replace float with inline but it causes the width and height of each item to collapse. I would also like to centre the text horizontally and vertically within each list item as well, ideally ellipsisizing (not a word) overflow text. As one last specification I would like to only modify CSS to the ul and its children if thats possible.
While the language gets a little unclear when you're dealing with multiple parent and child elements, and centering (/middling) on 2 axes, I think that if the other answers aren't what you're looking for, you might actually want display: table-cell.
Check this fiddle.
If you give your li elements display: table-cell, text-align: center and vertical-align: middle, I think the text will arrange itself appropriately. Unfortunately, table-cell elements don't accept margin, so I added a 10px border instead.
In order to accomplish truncation of text that overflows and the insertion of an ellipse, you'll need to use some kind of javascript.
UPDATE
Having learned more about what you're after through the many other answers and comments, I've come up with a better solution here: http://jsfiddle.net/crowjonah/jx8sD/
What you need to do is insert <a class="list-item"> tags inside the li elements, and use this CSS:
.tile li {
background-color: white;
display: block;
float: left;
margin: 10px;
overflow: hidden;
}
.tile li a.list-item{
display: table-cell;
vertical-align: middle;
height: 75px;
text-align: center;
width:75px;
}
Text-align: center will align your list items to the center. Vertical-align: text-top will align items to the center vertically.
vetical-align will not actually do the job in this case. I wish it were that simple.
This aricle will give you some insight into the problem and will help you solve it:
Understanding vertical-align, or "How (Not) To Vertically Center Content"
This will do what you want. Borders on inline-block items are a pain, so I'm using a border to make it look right.
.tile li {
background-color: white;
display:inline-block;
border: 10px solid red;
width: 75px;
height: 75px;
text-align:center;
display:table-cell;
vertical-align:middle;
overflow: hidden;
}
Related
I know how to align text vertically inside a div, but I am unsure on how to do it if the div has a percentage height and width. Here is my code:
<div id="header">
<h1>Home</h1>
</div>
#header {
background-color: red;
color: white;
text-align: center;
vertical-align: middle;
width: 100%;
height: 15%;
}
Now on my webpage the text in the div has been aligned correctly horizontally but not vertically. How do I fix this problem? Can you also try to explain your answers and keep them as simple as possible please (I'm still relatively new at HTML/CSS). Thank you.
You can use the flexbox model to easily center things.
Just add the following rules to your container:
display:flex;
justify-content: center; //horizontal centering
align-items:center; //vertical centering
FIDDLE
Note this is probably a more general solution than what you expected, but what's really cool about flexbox is that it works in many different cases, including yours (example with an h1 tag here).
Try giving display:inline-block to your h1 tag.
DEMO
You can just add:
display:inline-block
to your h1
example: http://jsfiddle.net/24pwprvf/
Add line-height matching the height of the container:
#header {
background-color: red;
color: white;
text-align: center;
vertical-align: middle;
width: 100%;
height: 15%;
line-height: 0.15em;
}
You should not use line-height for the effect you desire as suggested by Praveen Above.
You can get the same affect by either putting, 'display: inline-block' in either the #header div or in the #header h1 css style.
the first part is not advisable.Best practice will be to use it in the h1 style only.
I know that this has been asked a thousand times before and I apologise for asking again, but I haven't been able to figure this out after a few minutes of searching.
I am trying to centre an anchor element within a div element both horizontally and vertically. The basis for this question is as follow.
<div></div>
<div></div>
<div>
Hello
</div>
<div></div>
<div></div>
div {
width: 100px;
height: 100px;
background-color: teal;
box-sizing: border-box;
margin: 10px;
float: left;
text-align: center;
display: table-cell;
vertical-align: middle;
}
a {
color: white;
text-decoration: none;
font-style: 14px;
}
Now, I know that I can use text-align: center; on the containing div to centre the anchor element horizontally and that I can use display: table-cell; vertical-align: middle; on the div to align it vertically but it doesn't seem to work together, especially when the div is set to float left.
How can I achieve this rather simple layout? Also, please elaborate on why what I'm trying doesn't work as I'd like to learn rather than just fix this.
I would prefer not to use line-height since it breaks with multi-line text.
http://jsfiddle.net/xHLze/2/
You basically listed the answer in your question, though you may just need to apply the styles to a few different places:
I put display: table; on the containing <div>, allowing me to set display: table-cell; on the <a> element, after which I can apply vertical-align: middle; to vertically center the text.
I then applied text-align: center; to the <a> element to horizontally center it.
http://jsfiddle.net/3RfgD/
What I believe you missed is that you should be setting display: table; on the table-cell elements parent in order for it to work properly. (an element cannot act as the cell of a table if it is not in a table, whether it's an actual table or a CSS one)
Use margin for your anchor tag to auto align it in the center of your div tag like this:
a{margin:0 auto;}
This automatically centralizes your text both vertically and horizontally. :) but since anchor tag is inline tag we need to specify it with respect to the div tag like this
div a {display:block;
width:50px;}
where 50px is with respect to div's width. Check out here why margin 0 auto doesn't work
I'm trying to vertically center single and multi-worded links in a horizontal nav. The multi-worded links work fine but as you can see the single worded links float to the left. I tried adding a width to ul li a and ul li.colour but that changes the width of the div itself.
http://codepen.io/Compton/pen/ufGCI
You can try this, it's a bit hackish but it works:
ul li span {
display: inline-block;
vertical-align: middle;
height: 110px;
font-size:2em;
text-align: center;
padding: 0 20px;
line-height: 110px;
}
.doubleLine {
display: table-cell;
line-height: 1em;
}
The line-height on the span centers it vertically; you add the doubleLine class to spans with more than one line to revert them and keep them working like they were.
I'd like to see a neater solution than this, but again it works for now. You may have trouble down the line as the double line spans are only happening to look like they work, they won't always work for every combination of words. You can test this by changing one of the words to two characters, you'll see it doesn't actually center it.
So I am designing a website right now (pretty nooby at HTML and CSS) but I made a design on Photoshop beforehand so that I could go right through the coding and make the website how I wanted. Well I have an issue. I have two DIV elements inside of a bigger container DIV that won't line up side-by-side, despite using inline-block. Here is the css code:
.contentContainer {
display: block;
width: 700px;
height: 250px;
margin: 20px auto;
}
.topContainer {
height: 230px;
padding: 10px;
background-color: white;
}
.topThumbnail {
display: inline-block;
width: 370px;
height: 230px;
}
.topThumbnail img {
width: 370px;
height: 230px;
}
.topInfo {
display: inline-block;
margin-left: 10px;
width: 300px;
height: 230px;
}
.topInfo p {
width: 300px;
height: 230px;
background-color: pink;
}
The contentContainer is the highest DIV holding my topContent and topThumbnail so I thought I'd throw it into the provided code.
And the HTML code:
<div class="topContainer">
<div class="topThumbnail">
<img src="YT.png" />
</div>
<div class="topInfo">
<p>Testing the information area of the top container or something along those lines</p>
</div>
</div>
Can't post pictures to explain the issue.. need 10 reputation.. will make it hard to describe.
In the design the two containers for the Thumbnail and the Info are supposed to be side-by-side and aligned at the top. The thumbnail is supposed to be on the left of the topContainer and the Info is supposed to be to the right of the thumbnail with a margin of 10. For some reason the info is not going to the right-side of the thumbnail but rather going under it. I have ALREADY set the margin to 0 to fix the default margin issues.
display: inline-block is working correctly in your example. What you need to add is vertical-align: top to your .topInfo div, and get rid of the default margin on your .topInfo p tag. Also, you need to make sure that there is enough room for the .topInfo div to sit to the side of the .topThumbnail div, otherwise it will wrap to the next line.
Like this:
http://jsfiddle.net/hsdLT/
A cleaner solution: I would look at ditching the display:inline-block CSS proporties on these elements altogether and just float them to the left. Then clear the floats by assigning clear:both to the .topInfo css property.
It's less code then your route will be and it's more structurally sound. :D.
.topThumbnail,
.topInfo {
float:left;
}
.topInfo {
clear:both;
}
Other people have already answered this with the solution, but I think it is important to understand why inline-block elements behave this way. All inline, table, and in this case, inline-block elements have the vertical-align property. The default value is set to baseline, hence the need to set vertical-align: top;.
See the docs here: https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align.
This other discussion is also helpful: Vertical alignment for two inline-block elements not working as expected
I have a div (#itemSelector) containing a variable type of div (.item). I need to evenly space the .item divs in the parent div. The .item divs have display: inline-block and need to stay that way.
Just for clarity: I want the div's contained in #itemSelector to get evenly spaced horizontally along the entire width of the div. The amount of divs in the parent can vary.
jsFiddle of the simplest usecase: http://jsfiddle.net/xTZ8z/
Edit: thirtydot suggested a solution to me which interesting looking
Created a jsFiddle of it: http://jsfiddle.net/xTZ8z/82/.
Wrapping a div around my .item divs with display: table-cell seems to work, tho this is not entirely what I'd like. Any other suggestions like this?
I know you stated that you needed to keep your divs with display: inline-block, but this method seems to achieve the effect you are looking for.
JSFiddle of the code: http://jsfiddle.net/xTZ8z/40/
EDIT: #Exelian this achieves the desired effect you are looking for: http://jsfiddle.net/xTZ8z/63/
EDIT: #Exelian This is a slightly altered and commented version of the previous code:
http://jsfiddle.net/xTZ8z/88/
I hope that helps!
You could do something like this:
#itemSelector {
width: 100%;
border: 1px dashed red;
margin: 0 auto;
padding: 0;
}
.item {
display: inline-block;
background-color: grey;
width: 25%;
text-align: center;
height: 100px;
line-height: 100px;
margin: -2px;
padding: 0;
}
That should do the trick
Example here
What about a table set to width 100%?