Please modify this example so as to show me how I can have the text beside the image vertivally aligned beside the middle of the image.
Demo: http://jsfiddle.net/Blender/sVx5e/1/
HTML:
<div onclick="window.location = '#'">
<img src="http://doc.jsfiddle.net/_images/jsfiddle-logo-thumb1.png">
jsFiddle
</div>
CSS:
div {
height: 150px; /* This is the height of the image */
line-height: 150px;
}
img {
float: left;
}
Use a <div>, not a <a> element, when wrapping blocks of elements. IE chokes up when you do...
Related
I'm trying to have it so that when on a mobile device, the image is above the text but both are centered and have equal margins on both sides. Is something like that possible given the following code? If so, how?
<p>
<img src = "Images\Locations\paolo-warehouse-placeholder.jpg" alt = "Paolo's Hideout" style = "width: 390px; height: 240px;">
(text)
</p>
Give the paragraph element a style of text-align: center; and the image this style:
img {
margin: 0 auto;
display: block;
}
This will center the image and the paragraph text and make sure the text is below the image.
I feel like this should be really easy, but I've been playing with it for ages and haven't gotten anywhere.
I have a div, and my images inside it are set to width:100%. This works as you'd expect, with the images appearing edge to edge inside the div.
For paragraphs inside this div, I have padding.
What I'd like, is for images inside those paragraphs to also appear at the full width of the div (not the paragraph, which is narrower, due to the padding). However I do need to keep the padding, as I need it or the text.
HTML (Which can't be changed):
<div id="grandparent">
<img src="whatever" />
<!-- this next image should be exactly the same width as the first one -->
<p><img src ="whatever" /> This text still needs to be padded though.</p>
</div>
CSS:
p {
padding:15px;
}
img {
width:100%;
}
I have tried adding a negative margin to the image (using the CSS below), which gets it over to the edge, but I can't accurately make it the same width as the div.
CSS:
p img {
/*starts the img in the right place, but doesn't fix the width */
margin-left:-15px;
margin-right:-15px;
}
One thing you can do is use the css calc property. Try the code below. Keep in mind that calc does not work in some older browsers.
Fiddle: http://jsfiddle.net/q8Lb7t3t/6/
html
<div class='gp'>
<img src='http://www.online-image-editor.com//styles/2014/images/example_image.png'/>
<p>
<img class='img-pad' src='http://www.online-image-editor.com//styles/2014/images/example_image.png'/>
text text text text text text text text text text
text text text text text text text text text text
text text text textext text text text text text text
</p>
</div>
css
.gp {
width: 300px;
background-color: #eee;
}
img {
display: inline-block;
width: 100%;
height: auto;
}
.img-pad {
margin-left: -20px;
width: calc(100% + 40px);
}
p {
padding: 20px;
}
Want to know the reason for this behavior.
CSS
div {
display: inline-block;
margin-right: 2px;
width: 20px;
background-color: red;
}
Empty div
<div style="height:20px;"></div>
<div style="height:40px;"></div>
<div style="height:60px;"></div>
<div style="height:80px;"></div>
behavior: element increases from bottom to top (height)
div with text
<div style="height:20px;">20</div>
<div style="height:40px;">30</div>
<div style="height:60px;">40</div>
<div style="height:80px;">50</div>
behavior: element increases from top to bottom (height)
see it in action: http://jsfiddle.net/8GGYm/
Basically it got to do with the way that vertical-align: is calculated. So if you put vertical-aling:bottom; attribute in the css then you will notice it will be the same with and without text.
you can read the this for more details.
When the div has no content, padding is not drawn in the box (i.e. when when 0, if there is content, the browser calculates where the padding would be). so there is a little difference in calculating with and without text.
Hope this is helpfull.
please see here: http://jsfiddle.net/dd24z/. By default text is vertical-align: top, but you can change that behavior:
div {
display: inline-block;
margin-right: 2px;
width: 20px;
background-color: red;
vertical-align: bottom;
}
http://www.w3.org/TR/2008/REC-CSS2-20080411/visudet.html#line-height
'vertical-align': baseline
Align the baseline of the box with the baseline of the parent box. If the box doesn't have a baseline, align the bottom of the box with the parent's baseline.
Add
vertical-align: bottom;
to your CSS. Hope it works as you want.
I guess this can be explained by the text alignment, independently from divs.
Text, when placed in a div, is vertically aligned to top-left by default. Those divs without text align beside each other (inline-block) expanding the page downwards. If you add another div, you'll see the second header going further down.
<h1>Empty div</h1>
Some text
<div style="height:20px;"></div>
<div style="height:40px;"></div>
<div style="height:60px;"></div>
<div style="height:80px;"></div>
continuing here
<h2>Div with text</h2>
Some text
<div style="height:20px;">20</div>
<div style="height:40px;">40</div>
<div style="height:60px;">60</div>
<div style="height:80px;">80</div>
continuing here
...
div {
display: inline-block;
margin-right: 2px;
width: 20px;
background-color: red;
}
Fiddle
In the above fiddle, you can see that the text line is the "guideline".
Maybe this is the explanation: once the divs have text in them, they will align it with the surrounding text and, if inexistent, then they align their bottom line.
I'm sorry, maybe not very clear but I hope you understand my view.
I've got some linked images centered in a div. After the last image, I want to add a text link. For some reason, the links don't wrap around the images, they sit below the images, meaning my text link at the end is in line with the previous links, below the images themselves. What I want is for the text link to be at least in line with the images.
Check out the JSFiddle: http://jsfiddle.net/RFzMv/
If I float the links around the images, then they are the same size as the image and everything works as expected, but then the images aren't centered in the master div. The number of images can change, as can their dimensions, so I can't set them using absolute or anything like that.
How can I get the link to be the same size and position as the image it surrounds without using float, so the following link is in line with the images?
The HTML is nearly the same as yours except for the third child div. I wrapped the text in a <span> div and then that is contained by the a.imageCount link.
<div class="centered">
<a class="image-link" href="">
<img src="http://placekitten.com/100/100" width="100" height="100" />
</a>
<a class="image-link" href="">
<img src="http://placekitten.com/110/110" width="100" height="100" />
</a>
<a href="#photos" class="imageCount">
<span>some text</span>
</a>
</div>
The CSS looks like this:
.centered {
width: 500px;
height: 300px;
background-color: #EEE;
text-align: center;
}
a {
text-decoration: none;
outline: 1px dotted blue; /* optional to show content boxes */
}
.image-link {
display: inline-block;
vertical-align: bottom; /* try out: bottom, middle, top */
}
.image-link img {
vertical-align: bottom; /* get rid of small white space below images */
}
.imageCount {
display: inline-block;
border: 1px solid blue;
padding: 5px;
border-radius: 5px;
background-color: lightgray;
margin-left: 10px;
}
.imageCount span {
/* in case you need to style the text in a special way */
}
You can see the demo fiddle at: http://jsfiddle.net/audetwebdesign/uBVHC/
How This Works
Basically you have three inline block child elements in div.centered, so text align works as you expect.
I assume that one of the images will be the tallest element in the line and that you would like to have some control over the positioning of a.imageCount.
If you apply the vertical-align property to .image-link, then that will determine how the images are aligned vertically with respect to the a.imageCount element. You can try out the three principal values (top, middle, bottom) and pick one that suits the design you want.
If you want to adjust the top (or bottom) position, simply use a top (or bottom) margin on .imageCount and display: top (or bottom) on .image-link.
You can adjust the horizontal separation you a left margin on .imageCount.
If you have a container div that is position relative then you can have a div inside it with position absolute that is positioned relative to the containing div and not the entire window.
This would let you keep your centered images while placing the link anywhere you want.
#centered { position: relative; width: 500px; height: 300px; background-color: #EEE; text-align: center; }
.link-that-you-want-to-be-inline { position:absolute;margin-top:50px; }
here is a fiddle:http://jsfiddle.net/RFzMv/39/
I have been trying to do the following. I have a <div> element
which spans the whole width of its parent div. Inside of this
I would like to place A. some text and B. an image.
A. some text (either loose text or text enclosed in a <p>, <h2>,
or <span>, or <div> element), on the left.
B. an image defined via an <img> element whose both height and width
are known.
Other requirements:
There must be 12px of space between the text and the <img> element.
Important: both the text from A. and the image from B. must be
centered as a group.
The text from A. must be vertically centered in its enclosing space.
How can I achieve this effect? I have tried different things but cannot
manage to place the image to the right of the text and cannot manage to
have the text A. vertically centered.
Anyone know how to solve this simple problem?
Thank you all for your answers, seems CSS makes simple things so hard,
anyways:
div#content_whatsnew, div#content_bestsellers { clear: both; height: 108px; font-size: xx-large; text-transform: uppercase; margin-left: 380px; }
div#content_whatsnew p, div#content_bestsellers p { float: left; height: 108px; line-height: 108px; padding: 8px 12px 0px 0px; color: black; }
div#content_whatsnew img, div#content_bestsellers img { float: left; height: 108px; }
Is this what you are trying to achieve? http://dabblet.com/gist/3130292
Is this about right?
http://jsfiddle.net/89twb/2/
For aligning text, check this out.
And for placing elements next to each other, this.
This should work:
<div class="my-outer-container">
<div class="my-inner-container">
<div class="my-text">Here is my text, it is lovely text.</div>
<img src="my-image.jpg" alt="" class="my-image" />
</div>
</div>
.my-outer-container {
width:auto;
text-align:center;
}
.my-inner-container {
width:XXXpx; /* enter whatever the width you want here is */
margin:0 auto;
overflow:auto;
}
.my-text {
width:XXXpx; /* enter whatever the width you want here is */
float:left;
margin-right:12px;
}
.my-image {
width:XXXpx; /* enter whatever the width you want here is */
height:XXXpx; /* enter whatever the height you want here is */
float:left;
}
Then maybe use the vertical centering tip on the link provided above by #biziclop
The most intuitive way would be using 'vertical-align:middle;' but it often tends not the way you want it to work.
I did some research and found this code from here. http://phrogz.net/css/vertical-align/index.html
Hope this helps!
<style type="text/css">
#myoutercontainer { position:relative }
#myinnercontainer { position:absolute; top:50%; height:10em; margin-top:-5em }
</style>
<div id="myoutercontainer">
<div id="myinnercontainer">
<p>Hey look! I'm vertically centered!</p>
<p>How sweet is this?!</p>
</div>
</div>
In order to center a div, it has to have a fixed width. If it spans the width of its parent div, you can only then center things inside it. So it sounds to me like the best solution would be to place your text in a fixed-width left-floated div, and do the same for your image, and then place those both in a fixed-width holder div, which is centered with margin:auto;
Here's an example: http://dabblet.com/gist/3130148
Edit- I vertically centered the text by placing it in a table. Tables are the only surefire way to vertically center something cross-browser.