How can I center vertically the span and the image here?
<div id="foo">
<span>Im great</span>
<image src="">
</div>
div {
height:350px;
background:yellow;
}
div span{
line-height: 350px;
background: red;
}
DEMO
When I remove the image the span is centered, but if I add the image the span is not centered any more..why?
This seems to work
<div id="foo">
<span style="vertical-align:middle;">Im great</span>
<image style="vertical-align:middle;" src="http://t2.gstatic.com/images?q=tbn:ANd9GcROD-0j3FBYzU2dxJMpps3ZWiYl0dKoEdt1EE4c5zVHtPfhyw_59q4WEX2S">
</div>
Wrap them in a div and then use the following:
HTML:
<div id="foo">
<div class="wrapper">
<span>Im great</span>
<image src="">
</div>
</div>
CSS:
#foo{
position: relative;
}
.wrapper{
position: absolute;
margin: auto;
top: 0;
bottom: 0;
}
And if you want fully centered you can add: left: 0, right: 0 .
http://cdpn.io/yvanH
adding a <br /> tag after span lets the img flow below the span
Related
Below is my div structure. I've got 2 arraow set on the top and at the bottom.
My question is how do I make the 2 arrows centered and slightly towards the column of images?
Here is a Fiddle
I tried this but no luck
.arrows{
border: 3px solid lime;
text-align: center;
left: 0;
right: 0;
margin: 0 auto;
display: inline-block;
height: auto;
}
html:
<div id="Wrapper">
<div class="row">
<img src="http://img42.com/p2OH4+" class="arrows" height="128" width="128" />
<div id="itemWrapper">
<div id="items">
<div class="content">
<input type="image" src="http://img42.com/p1puE+" class = "thumb" />
</div>
<div class="content">
<input type="image" src="http://img42.com/p1puE+" class = "thumb" />
</div>
<div class="content">
<input type="image" src="http://img42.com/p1puE+" class = "thumb" />
</div>
</div>
</div>
<img src="http://img42.com/h1DoP+" class="arrows" height="128" width="128" />
</div>
</div>
Well, you were on a right track with display-inline and text-align:center
You just needed to set the align property on the parent element so that any inline or display-inline HTML element inside that parent element would be centered.
#Wrapper{
height: 100%;
border: 1px solid #f60;
text-align:center;
width:300px;
}
.arrows{
border: 3px solid lime;
display:inline-block;
background:red;
position:relative;
z-index:10;
}
You could also use negative margins on #itemWrapper to offset the arrows up and down.
#itemWrapper{
height: 100%;
overflow: hidden;
position: relative;
border: 1px solid brown;
margin-top:-15px;
margin-bottom:-15px;
}
JSFIDDLE
Centering the arrows
Enclose the arrows in div tags. Set the width of the divs to be the same width as the images. Then, use text-align: center in your css, for the div.
<div class="arrow-wrapper">
<img src="http://img42.com/p2OH4+" class="arrows" height="128" width="128" />
</div>
css:
.arrow-wrapper{
width: 200;
text-align: center;
}
Making them closer
In order to get them closer to the image, give each arrow its own class:
<img src="http://img42.com/p2OH4+" class="arrows top" height="128" width="128" />
<img src="http://img42.com/p2OH4+" class="arrows bottom" height="128" width="128" />
And then put css:
.top{
position: relative;
top: 20px;
}
.bottom{
position: relative;
bottom: 20px;
}
To add to #Slavenco's answer and to wrap this up entirely, I would suggest adding an "arrow-top" class, and "arrow-bottom" class, and adjust the margin to achieve the overlapping effect you are looking for. You may need to adjust the z-index to make the arrows appear on top.
I wrapped each image like so:
<div class="arrow arrow-top">
<img src="http://img42.com/p2OH4+" class="arrows" height="128" width="128" />
</div>
(Of course, the bottom arrow is arrow-bottom instead of arrow top)
and the CSS is as follows:
.arrow { width: 100%; text-align:center; }
.arrow-top{ margin-bottom: -10px; }
.arrow-bottom{ margin-top: -10px; }
You can obviously adjust the margins until you get the absolute desired overlap you're looking for.
https://jsfiddle.net/b899145q/12/
I'd use position: relative; for class="row" and position: absolute; for class="arrows" to get the overlap you want. Take them out of document flow. To just get them to just center without overlap, move the text-align: center; to the containing element.
I want to put the play button (first img) centered to the second images. I can do it with position absolute and margin but how can that be dynamic? What if I'm in a loop and the height of the second images is not always the same?
<img src="http://maxcdn.clubcooee.com/img/icons/play-button2.png"/>
<img src="http://www.howtorecordpodcasts.com/wp-content/uploads/2012/10/YouTube-Background-Pop-4.jpg"/>
There are two solutions to do this
1) Put that image between paragraph tags and give style to that paragraph "text-align:center;", just like below
<p style="text-align:center"><img src="#url to your image"/></p>
2) Give style to that img tags margin:0px auto , just like below
<img src="#url to your image" style="margin:0px auto;"/>
you will need to add a parent for the images and position the play image absolute and set it top left 50% and set negative margin of half the width of the play image so that it align it vertically and horizontally
div {
margin: 30px;
position: relative;
border: 1px solid red;
}
img.main {
width: 100%;
height: auto;
vertical-align: middle;
}
img.play {
position: absolute;
top: 50%;
left: 50%;
margin: -63px 0 0 -63px;
}
.second .main {
height: 400px;
}
<p>with smaller height</p>
<div>
<img class="play" src="http://maxcdn.clubcooee.com/img/icons/play-button2.png" />
<img class="main" src="http://www.howtorecordpodcasts.com/wp-content/uploads/2012/10/YouTube-Background-Pop-4.jpg" />
</div>
<p>with larger height</p>
<div class="second">
<img class="play" src="http://maxcdn.clubcooee.com/img/icons/play-button2.png" />
<img class="main" src="http://www.howtorecordpodcasts.com/wp-content/uploads/2012/10/YouTube-Background-Pop-4.jpg" />
</div>
I have several fluid images that I want to float and stack up next to each other. For example I have the img-div width set to 50% which stacks two images in each row. The images also increase in size depending on browser size. At the same time I want to be able to put a text over the middle of each image that floats around and stays in the center of the images. My problem is the text not centering. When I set img as absolute it centers but the stacking gets messed up.
Any idea how I can do this via CSS only?
Here's my HTML code:
<div id="container">
<!-- image1 -->
<div class="img-div">
<a href="#">
<img src="images/image1.jpg" />
<div class="txt-div">
<p>Some text goes here!</p>
</div>
</a>
</div>
<!-- image2 -->
<div class="img-div">
<a href="#">
<img src="images/image2.jpg" />
<div class="txt-div">
<p>Another text.</p>
</div>
</a>
</div>
<!-- image3 -->
<div class="img-div">
<a href="#">
<img src="images/image3.jpg" />
<div class="txt-div">
<p>Some more text.</p>
</div>
</a>
</div>
<!-- image4 -->
<div class="img-div">
<a href="#">
<img src="images/image4.jpg" />
<div class="txt-div">
<p>Last text.</p>
</div>
</a>
</div>
</div>
Here's my CSS:
.img-div {
width: 50%;
float:left;
a {
position: relative;
display: block;
height: 100%;
font-size: 0;
text-align: center;
}
a:before {
vertical-align: middle;
content: '';
display: inline-block;
height: 100%;
width: 0;
}
.txt-div {
vertical-align: middle;
position: relative;
z-index: 10;
display: inline-block;
font-size: medium;
p {
padding: 0;
margin:0;
}
}
img {
position: absolute;
width: 100%;
z-index: 9;
top: 0;
left: 0;
}
}
You almost had it :)
use position:relative/ absolute to draw your text-container over the image, and within use the pseudo :before and vertical-align technique to center your <p>.
.img-div {
width: 50%;
display:inline-block;
position: relative;
}
.img-div img {
width:100%;
}
a {
text-align: center;
}
.txt-div {
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
z-index:1;
}
.txt-div:before {
content:'';
padding-top:100%;
vertical-align:middle;
display:inline-block;
}
.txt-div p {
max-width:95%;
display:inline-block;
vertical-align:middle;
}
DEMO: http://codepen.io/gc-nomade/full/Cxkqf
remove the div around the p and set position:absolute; to the p set the img to position:relative; the p will now go over the img, if I'm correct. set text-align:center; to p to get it centered. (sometimes it might be good to width:100%; the p too)
You could use CSS background images to place each image in a dynamically sized div, then simply float the divs and they will fill in whatever space without altering position of the block level elements. In this case each div would get a unique id according to the image it would contain and the urls for your images would be a background image for the div. The only drawback to this that I can see is that if images were disabled you would not get alt text, but your divs would remain the specified size. and in their correct position.
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>
Firstly, I would like to show you a image(made in paint).
Okay "current" is what I have now. I want to place a box over the image to the right, with black background, and then have text inside this box.
I tried myself using z-index and so, but without any success. Here's what I tried:
<div> <!-- start div for image -->
<img style="z-index: -1;" src="1.jpg" width="860" height="240"> <!-- the image -->
</div> <!-- end div -->
<div style="z-index: 1; width: 300px; background: #000; position: relative;">
<div style="margin: auto;">
text text text
</div>
</div>
but this didnt turn out any good. How can i do this?
Something like this?
http://jsfiddle.net/QGMPB/1/
HTML:
<div id="wrap">
<img src="http://jsfiddle.net/img/logo.png" />
<div id="text">text</div>
</div>
CSS
#wrap {
position:relative; /* make this relative to have the inner div absolute without breaking out */
width: 200px; /* fix the width or else it'll be the entire page's width */
background: silver;
border: 1px solid grey
}
#text {
position: absolute;
width: 40px;
right: 0;
top: 0;
bottom: 0;
background: black;
color:white
}
Your code is messy and overcomplicated for such a simple issue, you can simplify it a lot by only using two elements. The simpler the better.
Please specify if you need the <img> tag.
HTML:
<div id="golf_course">
<div class="text_wrap_right">
text text text text
</div>
</div>
CSS:
#golf_course
{
background-image: url(http://ww1.prweb.com/prfiles/2006/12/13/491548/ThaiGolfCourse.JPG);
background-position: 0 -200px;
width: 900px;
height: 259px;
border: 5px solid #000;
}
.text_wrap_right
{
width: 300px;
height: 100%;
float: right;
background: #000;
color: #fff;
border-left: 2px solid #000;
}
And an example for you here: http://jsfiddle.net/Kyle_Sevenoaks/WQT6G/
I prefer a simple and more semantic HTML5 solution
HTML:
<figure>
<img src="..." />
<figcaption>text text text ... </figcaption>
</figure>
CSS:
figure {
position : relative;
z-index : 1;
width : 860px;
height : 240px;
}
figcaption {
position : absolute;
z-index : 1;
top : 0;
right : 0;
width : 200px;
height : 240px;
background : #000;
}
Use position:absolute to overlap 2 divs. You have to play with left and top properties to adjust its position.
<div style="position:absolute"> <!-- start div for image -->
<img style="z-index: -1;" src="1.jpg" width="860" height="240"> <!-- the image -->
</div> <!-- end div -->
<div style="position:absolute; z-index: 1; width: 300px; background: #000; position: relative; left:3%; top:85%">
<div style="margin: auto;">text text text</div>
</div>
You need to put that text div inside the div that contains the image.. then set top and right to 0px and position absolute. take some hints from here: http://jsfiddle.net/U25XQ/1/
The following example shows how this can be done, please let me know if it is not what you mean: Example.
z-index only works for positioned elements (position: (absolute|fixed|relative)). So you have to position your elements. For example
<div style="position: relative;">
<div style="position: absolute; top: 0; left: 0; z-index: 0; height: 100px; width: 300px;">
<img src="http://w3schools.com/images/w3cert.gif" />
</div>
<div style="z-index: 1; width: 200px; background: #000; position: absolute; left: 100px; color: #fff;">
<div style="margin: auto;">text text text</div>
</div>
</div>
should work.
For writing text over image you put image in background style and alt text like this-
<img scr="" alt="text"/>
<style>
.img{background-image:url('IMAGE_URL'); }
</style>