I tried to v-align a image with a text in my link.
Until now I have used a background image to perfectly v-center the image of my text
CSS
.label {
margin: 0 0 0 15px;
padding: 0;
color: #fff;
}
a.moreinfo {
background: url(../images/gallery/add.png) no-repeat left center;
cursor: pointer;
}
HTML
<a class='moreinfo'><span class='label'>MORE INFO</span></a>
Now I want to try not to use background images, but insert an image in the html code (img src). I tried using vertical-align: middle, but the image is not aligned precisely like the one in the background. How could I do to get the same thing with an image included in the html code? thanks
Here is how you can center an element in another:
.Absolute-Center {
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}
You can find more in this link: http://blog.themeforest.net/tutorials/vertical-centering-with-css/ .
I've found something like this to work very well for me:
a.moreinfo {
display: table;
width: 100%;
}
a.moreinfo span, a.moreinfo img {
display: table-cell;
vertical-align: middle;
width: 50%;
float: none;
}
When you vertically align while setting display to table, floated elements won't work as expected. The parent should have a set width or the default width will set to auto and, again, not work as expected.
Related
I have a container div and two divs inside it.
I have tried to center align the contents of both divs but for some reason, the 2nd div looks incorrect in relation to the first div.
First inner div aligned like this:
.main-text {
position: absolute;
text-align: center;
color: red;
top: 20%;
width: 100%;
letter-spacing: .6em;
}
Second inner div aligned like this:
.down-arrow {
text-align: center;
width: 100%;
}
.bottom {
color: white;
position: absolute;
top: 50%;
font-size: 2em;
}
Full code with demo of how the 2nd inner div with content "DWN" looks off: http://jsfiddle.net/qbmtap7t/
Not sure what I have done wrong, thanks
You need to move the position and top directives of your .bottom class to the .down-arrow which is the actual container of the bottom text:
.down-arrow {
width: 100%;
position: absolute;
top: 50%;
text-align: center;
}
See Fiddle
Use Css selectors : try editing your Css class .down-arrow like this :
.down-arrow .bottom {
text-align: center;
width: 100%;
}
See the demo :
http://jsfiddle.net/qbmtap7t/3/
Hope it helps.
The style you applied for .bottom, apply it for .down-arrow and it would work. Also, you seem to have a lot of html structure just for a simple link, any specific reason for using a span inside anchor? As a best practice, try to avoid unnecessary markup.
I need to align the p element to the bottom center of the page but something is wrong. I am making an HTML5 page.
Here is the CSS selector:
p { vertical-align:80px; }
If you need exactly "align the p element to the bottom center of the page"
p {
position: absolute;
bottom: 0;
width: 100%;
text-align: center;
}
demo
but it's not the best solution for most websites. Suppose, you are trying to make footer with some copyright (or year, or your name). In this case you have to use more complicated html and css, that includes main div, footer div, etc.
Please try this:
CSS
html,body{
marign: 0;
padding: 0;
height: 100%;
}
body:after {
content: "";
display: inline-block;
height: 100%;
width: 0;
}
p{
display: inline-block;
vertical-align: bottom;
}
Please view the demo. You will change the vertical-align for p, lay hime at top or middle.
Is there any way to align element (div in our case) to bottom of flex?
Fiddle here: http://jsfiddle.net/djeQv/1/
#images div {
position:relative;
bottom: 0px;
margin-top: -10px;
padding-top: 10px;
cursor: default;
}
This usual way didn't worked this time.
Why not position the text absolute? Something like this:
#images div {
position:absolute;
bottom: 0;
text-align: center;
width: 100%;
}
Since this takes the text out of the flow of the document, you will need to add some padding to the bottom of your link to prevent the text from overlapping the image.
I updated your fiddle to demonstrate: http://jsfiddle.net/djeQv/2/
#sponsors {
float: right;
display: inline;
width: 728px;
height: 100px;
margin: 60px 11px 0;
}
<div id="sponsors">
<img src="images/sponsors/1.png">
<img src="images/sponsors/2.png">
</div>
I can't move images to the right side of div with this, but div align="right" works.
How can I set images to right side using css3?
Change the display to block and add text-align:right
#sponsors {
float: right;
display: block; /* or remove this line, as block is default for div */
width: 728px;
height: 100px;
margin: 60px 11px 0;
text-align: right;
}
Display inline doesn't make much sense on elements with a width and a height sepcified. I assume you want the browser to respect your width and height so display should be block, or be removed completely as it is a div element which implies display:block by default. Then you want the elements inside the div to align to the right, which you do by applying text-align.
Try this:
#sponsors a img {
float:right;
}
Currently you are floating the sponsors div to the right, instead of the images inside the sponsors div. Target the images to float them, and it should work for you.
The images themselves need to be floated or their parent element needs to have its text alignment modified.
Floated: http://jsfiddle.net/MAz4Q/1/
#sponsors {
width: 728px;
height: 100px;
margin: 60px 11px 0;
}
#sponsors img {
float: right;
}
Aligned: http://jsfiddle.net/MAz4Q/2/
#sponsors {
width: 728px;
height: 100px;
margin: 60px 11px 0;
text-align: right;
}
I have an "article-box" that is used for a few different pages with 2 different widths. I have an image that i would like to display in the top right hand corner of each of these boxes. how could i use css to display the image correctly in the top right hand corner for each box?
i have the following css code which doesn't quite work, thanks in advance.
.wide-article-box {
#extend .article-box;
padding: 20px;
max-width: 900px;
#badge {
position: relative;
max-width:260px;
}
#badge img {
position: absolute;
border-width: 0px;
}
}
and in the view
<div class="wide-article-box">
<!--text etc -->
<div id="badge">
<%= image_tag "BLH_BADGE.png" %>
</div>
</div
.wide-article-box {
#extend .article-box;
padding: 20px;
max-width: 900px;
position: relative;
#badge {
position: absolute;
top: 0;
right: 0;
max-width:260px;
}
#badge img {
border-width: 0px;
}
}
You can look into the float property of CSS. It will also automatically wrap text around the image (or any block element).
#badge {
float: right;
max-width: 260px;
}
P.S. you might also have to use clear css property but that will depend on the nature of the DOM. just read up on on float and clear properties