I am building a bunch of list items in an un-ordered list. The list has a fixed size of 250px X 75px;These list items are generated dynamically so i do not know what text will be displayed, so my li looks like this.
#pages-content li{
float: left;
width: 250px;
height: 75px;
margin: 15px;
vertical-align: middle;
text-align: center;
}
I found one suggestion that said to make the line height 75px and that worked until there is more than one line.
CSS:
#pages-content ul li{
width: 250px;
height: 75px;
text-align: center;
}
HTML:
<div id="pages-content">
<ul>
<li>Matter here</li>
</ul>
</div>
Working fiddle
Do you have to use lists? Can you use divs instead?
<style>
.div {
width: 250px;
height: 75px;
position: relative;
}
.container {
position: absolute;
width: 250px;
height: 75px;
display: table;
}
.container p {
display: table-cell;
vertical-align: middle;
text-align: center;
}
</style>
<div class="div">
<div class="container">
<p>This text should look centered even if it's long.</p>
</div>
</div>
<div class="div">
<div class="container">
<p>This text should look centered even if it's long.</p>
</div>
</div>
<div class="div">
<div class="container">
<p>This text should look centered even if it's long.</p>
</div>
</div>
For a purely HTML/CSS solution, try using a table and vertical-align: middle in the table cell.
http://jsfiddle.net/3zLcT/
If you can only use css, I'm afraid you're out of luck.
adding display: table-cell might work, as vertical-align is meant, more or less, for table data
Related
I have this codes:
<div style="height: 100px;">Text Go Here</div>
I want to have vertical-align text inner this div.
but I don't want to use line-height for example below:
<div style="height: 100px; line-height:100px;">I don't want to use line-heigh</div>
because line-hight shoud be: line-height:20px;
how I can do this?!
tnx :)
The easiest way to handle it is to treat the div like a table cell:
<div style="display: table-cell; height: 100px; vertical-align: middle;">Text Go Here</div>
div {
display: table;
height: 100px;
width: 100px;
border: 1px solid #ddd
}
span {
display: table-cell;
vertical-align: middle;
text-align: center;
}
<div>
<span>Text Go Here</span>
</div>
I'm struggling trying to find a way to vertically align two images on two different columns
but I don't know how to do it.
Here the css of the two columns:
.left {
width: 50%;
height: 100%;
float: left;
text-align: center;
}
.right {
width: 50%;
height: 100%;
float: left;
text-align: center;
}
http://jsfiddle.net/6o6zwqLb/
I guess it should be pretty simple.
DEMO: http://jsfiddle.net/j55dxbe3/
I would use inline-block and make sure that my inline-block elements have no gap in the html (I used a comment to do this rather than making the font-size:0px on the parent and then putting a font size on the children).
HTML
<div id="center">
<div class="left">
<img src="http://placekitten.com/g/250/375" width="250" height="375" />
</div><!-- comment to close gap
--><div class="right">
<img src="http://placekitten.com/g/333/500" width="333" height="500" />
</div>
</div>
CSS:
.left, .right {
width: 50%;
height: 100%;
display:inline-block;
text-align: center;
vertical-align:middle;
}
Displaying your elements as table cells should cure what ails you:
#center {
...
display: table;
}
#center > div {
display: table-cell;
vertical-align: middle;
}
Demo
.left > img {
margin-top: 62px;
}
A margin-top of 62px on the smaller image will move it down where it is (about) 62px to the bottom of the page.
Demo
I'm trying to center two divs that are using "display: inline-block;" but whenever I try to, it's not working. If I remove the inline-block class. It gets centered but displayed down the page instead of across. Example of code:
#news {
background-image: url('../img/news.png');
background-repeat: no-repeat;
height: 152px;
width: 320px;
display: inline-block;
}
#conBody {
background-image: url('../img/conBody.png');
background-repeat: no-repeat;
height: 260px;
width: 321px;
margin: 0px auto 0px auto;
text-align: right;
display: inline-block;
padding: 0px;
}
HTML :
<div id="conBody">
</div>
<div id="conBody">
</div>
<div id="conBody">
</div>
<div id="news">
</div>
<div id="news">
</div>
<div id="news">
</div>
Looks like this:
You could contain everything within a wrapper. If you set the wrapper to display: table; then you can canter it even if you do not have a set width.
DEMO http://jsfiddle.net/kevinPHPkevin/nXj7c/
You need to use text-align property.
<div class="news-parent">
<div class="news">
a
</div>
<div class="news">
b
</div>
<div class="news">
c
</div>
</div>
.news-parent{
background: #ccc;
text-align: center;
}
.news {
width: 20%;
display: inline-block;
background: #666;
text-align: left;
}
Live example here: http://jsfiddle.net/7KFNR/
Advice: do not use IDs (#news) - ID is a unique identifier. Simply said: one ID can be found only once on single page. Use classes for rules that apply for multiple elements.
Remember: you need to specify width for div.news elements
You should wrap everything in a div and display it in the centre rather than trying to display each div in the centre individually.
You can centre a block element using CSS:
margin:0 auto;
Here is a fiddle with a barebones demo: http://jsfiddle.net/nRAyQ/3/
I have 2 div : avatar and secondClass. I want these 2 div to be aligned, so I'm giving to both of them the css attribut "display: inline-block;"
Inside of "secondClass" I have the div "message", I'm it the css attribut "word-wrap: break-word;".
"avatar" and "secondClass" are only aligned when "message" is not too long, and I want them to be aligned no matter what.
my css are :
.firstClass{
width: 80%;
}
.avatar{
display: inline-block;
padding-right: 5px;
vertical-align: top;
}
.secondClass{
display: inline-block;
vertical-align: top;
}
.message{
width: 50%;
-webkit-hyphens: auto;
-moz-hyphens: auto;
-ms-hyphens: auto;
-o-hyphens: auto;
hyphens: auto;
word-wrap: break-word;
}
and my html code is
<div class="firstClass">
<div class="avatar">
<img src="avatar.jpg">
</div>
<div class="secondClass">
<div class="message">
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
</div>
</div>
</div>
<br>
<div class="firstClass">
<div class="avatar">
<img src="avatar.jpg">
</div>
<div class="secondClass">
<div class="message">
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
</div>
</div>
</div>
For example in this fiddle it's working on the first try but not on the second one:
http://jsfiddle.net/ZZ8Dr/
You'll have to give them a max-width so the avatar and the secondClass both do not go over 100% of firstClass. Have a look at that fiddle.
For example:
.secondClass{
max-width: 80%;
}
.avatar{
max-width: 20%;
}
Use box-sizing: border-box; to include margin and padding in the percentage calculation.
In this case, I'd let .avatar float left. Then the width of .secondClass is not important for the alignment.
.avatar {
float: left;
}
and eventually (if you prefer):
.secondClass {
margin-left: <width of .avatar>;
}
Edit: A note to anyone reading this, the whole reason it didn't work for me is because I was using DOCTYPE TRANSITIONAL. Which no change in HTML or CSS whatsoever, switching to DOCTYPE STRICT made it work. This is true for at least Chrome, FF, and IE8.
I have tried many many solutions offered online and none of them seem to work for me. I am trying to vertical-align an image inside a div (the image is already horizontal-aligned).
The image can be any width and any height (up to 70px) so I can't use a fixed margin or anything like that.
Here is my HTML+CSS:
<head>
<style type="text/css" media="all">
#list ul {
list-style: none;
margin: 0px;
padding: 0px;
}
#list li {
border: 2px solid #DDD;
margin-bottom: 3px;
height: 110px;
}
#image {
width: 75px;
height: 110px;
line-height: 110px;
float: left;
}
#image img {
vertical-align: middle;
display: block;
margin: auto;
}
#event {
margin-left: 75px;
}
</style>
</head>
<body>
<div id='container'>
<div id="list">
<ul>
<li>
<div id='image'>
<img src='http://sstatic.net/stackoverflow/img/favicon.ico'/>
</div>
<div id='event'>
<h1>Text</h1>
<h2>More Text</h2>
</div>
</li>
<li>
<div id='image'>
<img src='http://sstatic.net/stackoverflow/img/favicon.ico'/>
</div>
<div id='event'>
<h1>Text</h1>
<h2>More Text</h2>
</div>
</li>
</ul>
</div>
</div>
</body>
</html>
You can't use vertical-align on a block element. An image is usually an inline element, but you have yours explicitly set to display: block. Remove that, and set the line-height of the parent div to the div's height.
Works here: http://jsfiddle.net/YnzR9/1/
#image {
width: 75px;
height: 100%;
float: left;
line-height: 110px;
text-align: center;
}
#image img {
vertical-align: middle;
}
Set the "line-height" of the div to the same value as the height of the div.
Update: Assuming you want the image vertically aligned and centered, use the following.
#image {
width: 75px;
height: 110px;
float: left;
line-height: 110px;
text-align:center;
}
#image img {
vertical-align: middle;
}