My question is about HTML - I need to arrange 2 images (there are in same line) in central of line, but also I need to write text to the right of each image; text must be align on vertically rather image. How can I do it?
You could do the following:
<div class="container">
<div class="img1">
<img src="http://www.veryicon.com/icon/png/Nature/Nature/Red%20Flower.png" />
<span>This is flower1</span>
</div>
<div class="img2">
<img src="http://www.veryicon.com/icon/png/Nature/Nature/Red%20Flower.png" />
<span>This is flower2</span>
</div>
</div>
And CSS:
div.container {
margin: auto;
width: 700px;
text-align: center;
position: relative;
}
div.img1 {
position: absolute;
left: 0px;
}
div.img2 {
position: absolute;
right: 0px;
}
img {
vertical-align: middle;
}
I made this example for you here on JSFiddle.
In the old way, you can use a table with border=0 with 1 row and 4 cols. The table, and td tags allow you to align vertical and horizontal. This is a very simple way to achieve your requirements, but it's not probably the better.
Also, you can align working with divs.
Related
I am trying to get three images in a line within a div without spaces and have text display over each of the images that will click through to a different page. I understand the solution to this probably lies in the position of both elements but I cannot seem to get the text to stay over the correct image. If someone could help me with this that would be great?
Below is the HTML.
<div class="services">
<div id="text-overlay">
<img src="Untitled-5.jpg">
<p>Landscaping</p>
</div>
<div id="text-overlay">
<img src="Untitled-6.jpg">
</div>
<div id="text-overlay">
<img src="Untitled-7.jpg">
</div>
</div>
And the CSS:
#text-overlay {
position: relative;
}
img {
display: block;
width: 33.3333333333%;
float: left;
height: 250px;
}
#text-overlay p {
position: absolute;
top: 1%;
left: 1%;
background-color: firebrick;
color: white;
padding: 1%;
}
Any help would be appreciated. Is this the best way to do it or are there better alternatives?
Your code has few errors:First of all you should use unique ID for indivisual element.Secondly you should use background-image for these conditions.Refer here for more details.
If you want to overlay over image learn from here.
I have a div containing a title text and an image.
With the code below, the title is showing just above the image.
HTML code:
<div class="thumbnail">
<div class="text">
<center>Heading</center>
</div>
<div class="image">
<img src="sample.png">
</div>
</div>
I would like to align the title so that it will appear on the center (vertically and horizontally) of the image.
How can I achieve that using HTML and CSS?
You could remove the image tag and make the image be the background of the container div.
HTML
<div class="text">
Heading
</div>
CSS
.text {
background-image: url('sample.jpg');
text-align: center;
}
EDIT: I don't want to sell it as my perfect answer, but I realized I missed the vertical alignment, and as similar solutions have already been provided here in comments and answers, let me just provide you with a good source of info below. The point is that you could use vertical-align:middle if you used span or other inline element, but with div, you have to use other tricks like position:absolute and minus margins.
Source: http://phrogz.net/css/vertical-align/index.html
Your markup is mostly correct with the exception of using the center element and you do not need to wrap the img element in a div.
Here is some example markup:
<div class="thumbnail">
<h1>Heading</h1>
<img src="sample.png">
</div>
And its corresponding CSS:
.thumbnail {
position:relative;
}
.thumbnail h1 {
text-align:center;
position:absolute;top:50%;left:0;width:100%;
margin-top:-20px; /*make the negative top margin = half your h1 element height */
}
You could always use an element other than an h1 to hold your title. This just depends on your preference.
The following might help you.
HTML:
<div class="thumbnail">
<div class="text">
Heading
</div>
</div>
CSS:
.text {
background-image: url('http://cs616623.vk.me/v616623331/7991/vPKjXbo-c7o.jpg');
width: 320px;
height: 240px;
line-height: 240px;
vertical-align: middle;
text-align: center;
font-size: 48px;
}
Take into account that in this approach you would have to set manually the height and the width of your text element. Moreover, the height should be duplicated in the line-height in order for vertical alignment to work correctly.
You could test and change the code in the corresponding JSFiddle or just check the full-screen result.
I wouldn't recommend using lineheight to vertically align the text(as some answers suggest) solely because if the header is to long and spans over across two rows it would look terrible.
What I would do is to absolute position the heading and then use display: table-cell to vertical align it.
Note that to be able to use this solution you have to specify an height for the heading.
HTML
<div class="thumbnail">
<div class="text">
<h1>Heading</h1>
</div>
<div class="image">
<img src="http://placehold.it/350x250" />
</div>
</div>
CSS
.thumbnail{
position: relative;
display: inline-block;
}
.text{
position:absolute;
top: 0px;
left: 0px;
width: 350px;
}
.text h1{
height: 250px;
display: table-cell;
vertical-align: middle;
text-align: center;
width: 350px;
color: #fff;
}
JSfiddle here
OK, I know that this is an old problem and there are some answers here on Stackoverflow, but none seems to contain a solution for my problem or I'm not fit to understand the answers provided.
I want to align content of one div on a page created with the help of Blueprint CSS horizontally and vertically centered as shown in the picture below and I can't figure out how. Most of the variations I tested use some sort of absolute positioning and all divs end up in the middle of the screen.
Try applying these styles to the div in which the text should be centered
.mydiv{
display: table-cell;
vertical-align: middle;
text-align: center;
}
I want to propose an alternative solution, using this CSS for the alignment:
.alignh {
display: table;
margin: 0 auto;
height: 100%;
}
.alignv {
display: table-cell;
vertical-align:middle;
}
It requires additional markup, as such:
<div class="alignh">
<div class="alignv">
<p>I want to be centered horizontally and vertically</p>
</div>
</div>
Why would it be useful? Because display:table-cell and vertical-align: middle will not work in a div that has position:absolute which is something desirable when making columns and rows. Also, placing a div with the display-table & vertical-align combo inside a div that has absolute position will may be infructuous because you may not be able to make that inner div fill the whole outer div without knowing the size (which may depend on the viewport).
The complete code...
HTML:
<div class="left col">
<p>I want to be left aligned</p>
<p>Me too</p>
<p>More text</p>
</div>
<div class="right col">
<div class="top row">
<div class="alignh">
<div class="alignv">
<p>I want to be centered horizontally and vertically</p>
</div>
</div>
</div>
<div class="bottom row">
<p>Just some more text...</p>
</div>
</div>
CSS:
.col {
top: 0;
bottom: 0;
}
.row {
left: 0;
right: 0;
}
.row, .col {
overflow: hidden;
position: absolute;
border: 1px solid black;
}
.left.col {
left: 0;
width: 250px;
}
.right.col {
left: 250px;
right: 0;
}
.top.row {
top: 0;
height: 100px;
}
.bottom.row {
top: 100px;
bottom: 0;
}
.alignh {
display: table;
margin: 0 auto;
height: 100%;
}
.alignv {
display: table-cell;
vertical-align:middle;
}
See at Codepen.
I am currently doing this with a table with 2 bottom-aligned cells. I am okay with the table solution, but just wondering if this is possible with (just css and html, no javascript).
Requirement:
* The sizes of the text and image are unknown, but the combined width of the two will not exceed the width of the containing element. (e.g. if i later want to change the image or the text, i do not want to dive into the ccs file)
* Image is aligned to the left, and the text (actually, a horizontal list) is aligned to the right.
Edit: In response to Kos,
the sizes of the text and images are dynamic, be it height or width, BUT the combined width of the two elements will not exceed the width of the containing element.
the image and text should be bottom aligned
the containing element should fit tightly the tallest element.
HTML
<div class="wrapper">
<img src="" class="image" />
<p class="text">Hello world!</p>
</div>
CSS
.wrapper {
position: relative;
width: 500px;
}
.image {
position: absolute;
display: block;
left:0;
bottom: 0;
}
.text {
position: absolute;
right:0;
bottom: 0;
}
EDIT: I added the appropriate HTML code.
EDIT 2: In case the height of the wrapper is unknown (only restriction is that .image has always to be higher than .text)
CSS
.wrapper {
position: relative;
width: 500px;
}
.image {
vertical-align: bottom;
}
.text {
position: absolute;
right: 0;
bottom: 0;
}
HTML
<div class="wrapper">
<img class="image" src="" />
<p class="text">
Hello world!
</p>
</div>
This should work I think:
HTML
<div class="outer">
<img src="" title="" />
<div class="text">Some text </div>
</div>
CSS
.outer {display: inline-block; width: 350px; }
.outer img {float: left;}
.outer .text {float: right; }
<div style="width:400px; overflow:visible; position:relative;">
<img src="#" alt ="#" style="float:left;"/>
<p style="position:absolute; bottom:0; float:right;">Lorem Ipsum</p>
</div>
This is what I'm trying to achieve
http://i.stack.imgur.com/e9xZa.jpg
I tried this
jsfiddle.net/RUSm3/
but as you can see the date overlaps on the image.
So I added left:215px for the date
jsfiddle.net/9aw29/
It looks good but perhaps I don't have an image. How can I get the date back to the far left? I'm trying to achieve this without php.
If you have a div like this
<div class="container">
<div class="date">today</div>
</div>
with this css fragment your date div will be positioned to the bottom right of it's container.
.container {
position:relative;
width: 100px;
height: 180px;
border: solid 1px black;
}
.date {
bottom:10px;
position:absolute;
right:10px;
}
You can verify it working here
I'm not sure what your markup is, but the easiest solution would be to have the heading, text and date all in one div (inside .entry), and float the image to the left if it's there. The date would be positioned as you have already done in your example. When there is no image, the entire div will move flush left.
<div class="entry">
<img [...] />
<div>
<h2>Heading</h2>
<p>Entry text</p>
<p class="date">[Date]</p>
</div>
</div>
Here is what I came up with and will probably be a good jumping-off point for you. In short, wrap the two text areas in their own divs, and wrap them in a parent div. Float the parent div to the right and make it's position something other than static. If the position is static, you cannot use the position: absolute attribute with it's children divs.
<style type="text/css">
div.entry{
float: left;
position: relative;
width: 40%;
}
img.left{
float: left;
}
div.right{
float: right;
display: inline;
position: absolute;
height: 100%;
width: 50%;
}
div.topRight{
}
div.bottomRight{
position: absolute;
bottom: 0px;
}
</style>
<div class="entry">
<img class="left" src="http://www.google.com/logos/2010/halloween10-ires.gif"/>
<div class="right">
<div class="topRight">
Some stuff
</div>
<div class="bottomRight">
Some other stuff
</div>
</div>
</div>