I've tried something, but vertical align doesn't work.
HTML:
<div class="browseBuildsArea-pro">
<img class="champion" src="http://wiki.guildwars.com/images/d/d3/60px-Ranger-tango-icon-200.png">
<div class="build-poster">
<span class="middle-text">
aaaaaaaaaaaa<br>
bbbbbbbbbbbb<br>
ccccccccccccc<br>
dddddddddddd<br>
</span>
</div>
</div>
CSS:
div.browseBuildsArea-pro {
float: left;
position: relative;
width: 790px;
height: 90px;
background-image:url('http://revistaverzus.com/online/background.jpg');
background-repeat:no-repeat;
}
div.browseBuildsArea-pro img.champion {
float: left;
display: block;
height: 72px;
margin-left: 14px;
margin-top: 7px;
border-radius: 9px;
-moz-border-radius: 9px;
-khtml-border-radius: 9px;
-webkit-border-radius: 9px;
}
div.browseBuildsArea-pro div.build-poster {
display: block;
position: relative;
margin-left: 150px;
margin-top: 10px;
}
span.middle-text {
vertical-align: middle;
}
http://jsfiddle.net/sCWfS/1/
How can I make the text align middle regardless of the length of the content?
Try using the following CSS:
div {
text-align: center;
}
Did you try this? http://jsfiddle.net/sCWfS/2/
Instead of span use a DIV with margin: 0 auto?
div.middle-text {
margin: 0 auto;
}
The vertical-align css attribute does not work for divs.
Look at this answer :
Vertical alignment of elements in a div
You need to use display: table on the parent and display: table-cell on the child for vertical-align to work.
Here's a working example: http://jsfiddle.net/sCWfS/3/
div.browseBuildsArea-pro div.build-poster {
display: block;
position: relative;
text-align: center;}
Related
I have the following CSS lines:
.liquid {
display: inline-block;
width: 25px;
height: 25px;
background: #ff8125;
margin-right: 15px;
}
<h2 class="liquid">Liquid</h2>
It should look like this:
http://imgur.com/B9vblUP
But instead looks like this:
http://imgur.com/8RQTkcO
What am i doing wrong here and how to get it exactly like the first pic?
I tried overflow hidden but that only shows Liquid in 25x25 on the block and the rest is not showing.
Any help is much appreciated.
Kind regards,
Majin Buu
I think you should create another element for the orange square instead of editing the class of the h2 element because the background attribute it will be applied on that element, so I would make something like:
<div class="liquid"></div>
<h2>Liquid</h2>
.liquid {
float: left;
width: 25px;
height: 25px;
background: #ff8125;
margin-right: 15px;
}
To have the square floating to the left of the element.
Check out CSS position!
.liquid {
display: inline-block;
position: absolute;
width: 25px;
height: 25px;
background: #ff8125;
}
h2 {
position: relative;
margin-left: 30px;
}
<div class="liquid"></div><h2>Liquid</h2>
Use html like this
<div class="bg_white">
<span class="liquid"> </span><h2>Liquid</h2>
</div>
CSS
.bg_white{background:white; padding:5px; width:auto; float:left;}
.liquid {
display: inline-block;
width: 25px;
height: 25px;
background: #ff8125;
margin-right: 15px;
float:left;
font-size:18px;
}
.bg_white h2{float:left; margin:0px;}
Pseudo element is better for this solution:
h2 {
background: #eee;
padding: 5px;
display:inline-block;
}
.liquid::before {
content:'';
display: inline-block;
vertical-align: middle;
width: 25px;
height: 25px;
background: #ff8125;
margin-right: 15px;
}
<h2 class="liquid">Liquid</h2>
You are styling the font part of the wanted result itself. You should either add an element for the orange square or use a pseudo element. This will get you in the right direction.
.liquid {
line-height: 1;
}
.liquid:before {
background: #ff8125;
content: ''; /* important for pseudo elements */
display: inline-block;
height: .9em;
margin-right: .45em;
position: relative;
top: .1em;
width: .9em;
}
<h2 class="liquid">Liquid</h2>
you can use below CSS for this if text is small and always in one line.
.liquid {
display: inline-block;
padding-left: 10px;
border-left: 25px solid #ff8125;
margin-right: 15px;
font: 25px/25px Arial;
font-weight: bold;
}
<h2 class="liquid">Liquid</h2>
The blocks are being laid out vertically (one on top of the other), I'm trying to use inline blocks to place 2 blocks side by side. I wanted to use inline-block instead of floats which do work. The steps div class is the container for both inline blocks. Am I missing something?
img.down_image {
display: inline-block;
vertical-align: middle;
width: 465px;
}
div.steps {
display: block;
position: absolute;
height: 500px;
top: 50%;
text-align: center;
}
ol {
display: inline-block;
vertical-align: middle;
width: 400px;
height: auto;
padding: 0 0 0 40px;
list-style: none;
overflow: hidden;
counter-reset: numList;
font: 16px sans-serif;
color: #fff;
}
the html:
<div class="steps">
<div class="down_image">
<img src="pic1.png" class="down_image" />
</div>
<ol>
<li>sdsdgsdgsdgsdgsdgsdg</li>
<li>sdgsdgsdgsdgsdg install Java.
</li>
<li>sdgsdgsdgsdgsdg</li>
</ol>
</div>
Add the following in your style
div.down_image {
display: inline-block;
}
You made the image inline, but the container div is not inline!
If you still have same issue, check the widths! Total width of 400 (ol) + 465 (img) = 865px might be more than the area you are using.
This code works fine, when widths are fixed. jsfiddle
Add white-space: nowrap; to div.steps and change html:
div.down_image {
width: 60%;
display: inline-block;
background-color: #ded;
}
div.steps {
white-space: nowrap;
width: 100%;
display: block;
position: absolute;
height: 500px;
top: 50%;
text-align: center;
}
ol {
background-color: #dde;
display: inline-block;
vertical-align: middle;
width: 30%;
height: auto;
padding: 0 0 0 5%;
list-style: none;
overflow: hidden;
counter-reset: numList;
font: 16px sans-serif;
color: #fff;
}
<div class="steps">
<div class="down_image">
</div><ol>
<li> sdsdgsdgsdgsdgsdgsdg</li>
<li> sdgsdgsdgsdgsdg install Java.</li>
<li> sdgsdgsdgsdgsdg</li>
</ol>
</div>
Notice glued </div><ol>
Note: make sure to add div.down_image { display: inline-block; }
Also, you can try to give position: absolute; to image's div and ol.
I have this html code:
<ul id="top-bar">
<li class="top-icon-block"><img src="images/home.png"></li>
<li class="top-icon-sep-block"><img src="images/top_icon_separator.png"></li>
<li class="top-icon-block"><img src="images/home.png"></li>
</ul>
and the relevant css looks like this:
#top-bar {
width: inherit;
height: 40px;
padding: 0px;
margin: 0px;
vertical-align: middle;
display: table-row;
}
.top-icon-block {
width: 50px;
margin: 0px;
background-image: url("images/top_bar_bg.png");
background-repeat: repeat-x;
display: table-cell;
text-align: center;
}
li.top-icon-block img {
padding-top: 8px;
vertical-align: middle;
}
.top-icon-sep-block {
width: 4px;
margin: 0px;
background-image: url("images/top_bar_bg.png");
background-repeat: repeat-x;
display: table-cell;
text-align: center;
}
li.top-icon-sep-block img {
padding-top: 18px;
vertical-align: middle;
}
for some reason, All of the images are aligned based on the highest padding-top, whereas I really need them to be differ.
Here is a jsfiddle: http://jsfiddle.net/XWdMP/
If I understand your issue correctly, it is because the padding is different on your elements, but it is being rendered inline with the larger padding. Effectively pushing down your other two images.
Adding a overflow hidden to your li elements should resolve the problem and hide the gap being shown from the difference in padding from the images.
#top-bar li {
overflow: hidden;
}
Let me know if that resolves the issue.
http://jsfiddle.net/rakkeh/XWdMP/1/
Can't post this on jsfiddle since it seems down.
div.browseBuildsArea-pro
{
float: left;
position: relative;
width: 790px;
height: 90px;
background-image:url('../images/builds/builds-bg-pro.jpg');
background-repeat:no-repeat;
}
div.browseBuildsArea-pro img.champion
{
display: block;
height: 72px;
margin-left: 14px;
margin-top: 7px;
border-radius: 9px;
-moz-border-radius: 9px;
-khtml-border-radius: 9px;
-webkit-border-radius: 9px;
}
div.browseBuildsArea-pro div.build-poster
{
display: block;
position: relative;
margin-left: 150px;
margin-top: 10px;
}
<div class="browseBuildsArea-pro">
<img class="champion" src="<%THEME%>images/lol/avatars/2.png">
<div class="build-poster">
awdwada
</div>
</div>
I'm new to CSS so I need help on two things.
Is there any overuse of attributes in my styling?
"build-poster" div always goes under image. How can I get it on right side of image?
Thanks alot!
You don't need to specify position:relative on <div> since you are not using any left, top, right and bottom properties on those divs. However it's a good idea for older browsers such as IE7.
you need to add float:left to img.champion class
You need to float the image, add:
div.browseBuildsArea-pro img.champion {
float: left;
}
CSS
div.browseBuildsArea-pro {
float: left;
position: relative;
width: 790px;
height: 90px;
background-image:url('images/builds/builds-bg-pro.jpg');
background-repeat:no-repeat;
}
div.browseBuildsArea-pro img.champion {
float: left;
display: block;
height: 72px;
margin-left: 14px;
margin-top: 7px;
border-radius: 9px;
-moz-border-radius: 9px;
-khtml-border-radius: 9px;
-webkit-border-radius: 9px;
}
div.browseBuildsArea-pro div.build-poster {
float: left;
display: block;
margin-left: 10px;
margin-top: 10px;
}
div.progress-for-build-listing {
float: left;
width: 250px;
margin-left: 400px;
margin-top: 0px;
}
HTML
<div class="browseBuildsArea-pro">
<img class="champion" src="<%THEME%>images/lol/avatars/2.png">
<div class="build-poster">
Test Message
</div>
<div class="progress progress-for-build-listing">
<div class="progress-bar" style="width: 100%;"></div>
</div>
</div>
What I am trying to achieve is basic.
I want "Test Message" content be aligned to the middle of the div automatically. (regardless of the length of string) Also, "progress bar" and additional divs on the right side should also be automatically centered to the middle.
Here is a preview of what I'm looking for.
(Both divs and content inside divs are automatically aligned to the middle.)
Tried several things but none worked. (e.g display: table-cell;)
How can I achieve this? One little example will get me going.
To align text in the middle you need 2 parameters in your CSS.
display:table-cell;
vertical-align:middle;
Also your div is missing a height. you must add that to align it.
for your code it would be :
div.browseBuildsArea-pro div.build-poster {
float: left;
display:table-cell;
vertical-align:middle;
height:72px;
text-align:center; // if you also want it to align in the middle horizontally
margin-left: 10px;
margin-top: 10px;
}
For vertical alignment check out this article:
http://phrogz.net/css/vertical-align/index.html
And utilising what I saw from the above article: http://jsfiddle.net/tf7Cb/
This for the horizontal centering should you require it:
div.browseBuildsArea-pro div.build-poster {
float: left;
display: block;
margin-left: 10px;
margin-top: 10px;
text-align: center;
}