I'm struggling with some code where I'm trying to align/float an image to one side of a column row and float/center text to the opposite side. What is happening is the image doesn't float all the way to the right; nor does the text align correctly when it is centered on the right.
It seems I can't attach an image. You can view the image by navigating to my website "yukionna.com" and adding the name of the image to the url: css_problem_01.jpg
Here is my code:
CSS:
.tn-container {
height: 100px;
background: #fff;
}
.tn-span {
display: inline-block;
vertical-align: middle;
text-align: center;
border-bottom:1px solid #ccc;
}
.tn-left img {
float:left;
width:110px;
height:90px;
margin:5px;
text-align:right;
}
.tn-right img {
float:right;
width:110px;
height:90px;
margin:5px;
text-align:left;
}
HTML:
<!-- row 1 -->
<div class="tn-container tn-left">
<div class="tn-span">
<img src="..." alt="">
Row 1 text
</div>
</div>
<!-- row 2 -->
<div class="tn-container tn-right">
<div class="tn-span">
<img src="..." alt="">
Row 2 text
</div>
</div>
<!-- row 3 -->
<div class="tn-container tn-left">
<div class="tn-span">
<img src="..." alt="">
Row 3 text
</div>
</div>
<!-- row 4 -->
<div class="tn-container tn-right">
<div class="tn-span">
<img src="..." alt="">
Row 4 text
</div>
</div
Try adding width: 100% to the .tn-span style. That should ask the span to occupy the full available width (and thus "properly" right-align your images). See this example.
Related
Why in the following code the height of the div is bigger than the height of the img ? There is a gap below the image, but it doesn't seems to be a padding/margin.
What is the gap or extra space below image?
#wrapper {
border: 1px solid red;
width:200px;
}
img {
width:200px;
}
<div id="wrapper">
<img src="http://i.imgur.com/RECDV24.jpg" />
</div>
By default, an image is rendered inline, like a letter so it sits on the same line that a, b, c and d sit on.
There is space below that line for the descenders you find on letters like g, j, p and q.
You can:
adjust the vertical-align of the image to position it elsewhere (e.g. the middle) or
change the display so it isn't inline.
div {
border: solid black 1px;
margin-bottom: 10px;
}
#align-middle img {
vertical-align: middle;
}
#align-base img {
vertical-align: bottom;
}
#display img {
display: block;
}
<div id="default">
<h1>Default</h1>
The quick brown fox jumps over the lazy dog <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f2/VangoghStarry-night2.jpg/300px-VangoghStarry-night2.jpg" alt="">
</div>
<div id="align-middle">
<h1>vertical-align: middle</h1>
The quick brown fox jumps over the lazy dog <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f2/VangoghStarry-night2.jpg/300px-VangoghStarry-night2.jpg" alt=""> </div>
<div id="align-base">
<h1>vertical-align: bottom</h1>
The quick brown fox jumps over the lazy dog <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f2/VangoghStarry-night2.jpg/300px-VangoghStarry-night2.jpg" alt=""> </div>
<div id="display">
<h1>display: block</h1>
The quick brown fox jumps over the lazy dog <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f2/VangoghStarry-night2.jpg/300px-VangoghStarry-night2.jpg" alt="">
</div>
The included image is public domain and sourced from Wikimedia Commons
Another option suggested in this blog post is setting the style of the image as style="display: block;"
Quick fix:
To remove the gap under the image, you can:
Set the vertical-align property of the image to vertical-align: bottom; vertical-align: top; or vertical-align: middle;
Set the display property of the image to display:block;
See the following code for a live demo:
#vAlign img {
vertical-align :bottom;
}
#block img{
display:block;
}
div {border: 1px solid red;width:100px;}
img {width:100px;}
<p>No fix:</p>
<div><img src="http://i.imgur.com/RECDV24.jpg" /></div>
<p>With vertical-align:bottom; on image:</p>
<div id="vAlign"><img src="http://i.imgur.com/RECDV24.jpg" /></div>
<p>With display:block; on image:</p>
<div id="block"><img src="http://i.imgur.com/RECDV24.jpg" /></div>
Explanation: why is there a gap under the image?
The gap or extra space under the image isn't a bug or issue, it is the default behaviour. The root cause is that images are replaced elements (see MDN replaced elements). This allows them to "act like image" and have their own intrinsic dimensions, aspect ratio....
Browsers compute their display property to inline but they give them a special behaviour which makes them closer to inline-block elements (as you can vertical align them, give them a height, top/bottom margin and padding, transforms ...).
This also means that:
<img> has no baseline, so when images are used in an inline formatting
context with vertical-align: baseline, the bottom of the image will be
placed on the text baseline.
(source: MDN, emphasis mine)
As browsers by default compute the vertical-align property to baseline, this is the default behaviour. The following image shows where the baseline is located on text:
(Image source)
Baseline aligned elements need to keep space for the descenders that extend below the baseline (like j, p, g ...) as you can see in the above image. In this configuration, the bottom of the image is aligned on the baseline as you can see in this example:
div{border:1px solid red;font-size:30px;}
img{width:100px;height:auto;}
<div>
<img src="http://i.imgur.com/RECDV24.jpg" />jpq are letters with descender
</div>
This is why the default behaviour of the <img> tag creates a gap at the bottom of it's container and why changing the vertical-align property or the display property removes it as in the following demo:
div {width: 100px;border: 1px solid red;}
img {width: 100px;height: auto;}
.block img{
display:block;
}
.bottom img{
vertical-align:bottom;
}
<p>Default:</p>
<div>
<img src="http://i.imgur.com/RECDV24.jpg" />
</div>
<p>With display:block;</p>
<div class="block">
<img src="http://i.imgur.com/RECDV24.jpg" />
</div>
<p>With vertical-align:bottom;</p>
<div class="bottom">
<img src="http://i.imgur.com/RECDV24.jpg" />
</div>
One can also nullify parent's line height:
#wrapper {
line-height: 0;
}
All fixes: http://jsfiddle.net/FaPFv/
All you have to do is assign this property:
img {
display: block;
}
The images by default have this property:
img {
display: inline;
}
You can use several methods for this issue like
Using line-height
#wrapper { line-height: 0px; }
Using display: flex
#wrapper { display: flex; }
#wrapper { display: inline-flex; }
Using display: block, table, flex and inherit
#wrapper img { display: block; }
#wrapper img { display: table; }
#wrapper img { display: flex; }
#wrapper img { display: inherit; }
I used line-height:0 and it works fine for me.
I found it works great using display:block; on the image and vertical-align:top; on the text.
.imagebox {
width:200px;
float:left;
height:88px;
position:relative;
background-color: #999;
}
.container {
width:600px;
height:176px;
background-color: #666;
position:relative;
overflow:hidden;
}
.text {
color: #000;
font-size: 11px;
font-family: robotomeduim, sans-serif;
vertical-align:top;
}
.imagebox img{ display:block;}
<div class="container">
<div class="imagebox">
<img src="http://machdiamonds.com/n69xvs.jpg" /> <span class="text">Image title</span>
</div>
<div class="imagebox">
<img src="http://machdiamonds.com/n69xvs.jpg" /> <span class="text">Image title</span>
</div>
<div class="imagebox">
<img src="http://machdiamonds.com/n69xvs.jpg" /> <span class="text">Image title</span>
</div>
<div class="imagebox">
<img src="http://machdiamonds.com/n69xvs.jpg" /> <span class="text">Image title</span>
</div>
<div class="imagebox">
<img src="http://machdiamonds.com/n69xvs.jpg" /> <span class="text">Image title</span>
</div>
<div class="imagebox">
<img src="http://machdiamonds.com/n69xvs.jpg" /> <span class="text">Image title</span>
</div>
</div>
or you can edit the code a JS FIDDLE
I just added float:left to div and it worked
You can also set overflow: hidden; for the container, and increase the height of the image to > 100%. height: 100%;
I am using Twitter Bootstrap and its grid layout and in one column I am trying to get an image pulled to the right and a text pulled to the right next to the image as well while they should both be vertically centered. With the image it's easy - I made the class img-responsive and added padding to that column and a pull-right to the image so it sits well, however the text doesn't seem to center whatever I try.
I tried applying this to the column:
.center{
display : table-cell;
vertical-align : middle;
float:none;
}
and it seemed to work when there's only text, however with the image included it won't.
Here is my code for the column:
<div class="col-md-3 col-xs-6 col-md-push-4 equalcolumn" id="namecolumn">
<img class="pull-right img-circle img-responsive" id="myimage" src="http://upload.wikimedia.org/wikipedia/en/0/03/Super_Mario_Bros._box.png" alt="">
<h4 class="pull-right" id="nametext">Welcome!</h4>
</div>
And CSS:
#namecolumn {
padding: 1vh;
}
.img-responsive {
height: 100%;
margin: 0 auto;
}
Thanks!
h4 is a block element, so set it as inline-block and give vertical-align:middle; to both img and h4 , so they center to each other on the baseline.
#myimage, #nametext {
display:inline-block;/* defaut display of img tag */
vertical-align:middle;
}
You will need to cretae 2 wrapper divs that have a value of display: table and display: table-cell. Then you can use vertical-align: middle.
DEMO http://jsfiddle.net/Fa8Xx/1750/
CSS
.wrapper {
height: 100%;
display: table;
}
.wrapper-inner {
height: 100%;
display: table-cell;
vertical-align: middle;
}
HTML
<div class="wrapper">
<div class="wrapper-inner">
<div class="col-md-3 col-xs-6 col-md-push-4 equalcolumn" id="namecolumn">
<img class="pull-right img-circle img-responsive" id="myimage" src="http://upload.wikimedia.org/wikipedia/en/0/03/Super_Mario_Bros._box.png" alt="" />
<h4 class="pull-right" id="nametext">Welcome!</h4>
</div>
</div>
If you want to vertically center float elements like col-md-3 and so on use this example http://www.minimit.com/articles/solutions-tutorials/bootstrap-3-responsive-columns-of-same-height
I'm having a small HTML/CSS Bootstrap problem here. Basically I have a span4 with a picture on the left side then a span8 with a paragraph describing the picture on the right side.
<div class="container">
<div class="cent text-center">
<div class="row box" style="border:1px solid #CCC; padding:15px 0px 15px 0px;">
<div class="span4" style="height:200px;"><div class="profile pro"><img src="http://icons.iconarchive.com/icons/deleket/sleek-xp-software/256/Yahoo-Messenger-icon.png" /></div><!----profile END---></div><!---span4--->
<div class="span8 section">
<h3 align="center">Title</h3>
<div class="team">
<p class="team">this is the description about the picture this is the description about the picture this is the description about the picture this is the description about the picture.</p>
</div><!---team END--->
</div><!---span8--->
</div><!---Row END--->
</div><!----cent END--->
</div><!--container END-->
.cent{
text-align:center;
margin:auto;
width:auto;
}
.section {
padding-top:20px;
margin:auto;
}
.team {
text-align:center;
margin:auto;
max-width:600px;!important
padding-left:20px;!important
padding-right:20px;!important
}
.profile {
max-width:200px;
text-align:center;
margin:auto;
padding-top:10px;
}
.pro {
padding-left:100px;!important
}
.box {
background:#FFF;
border:1px solid #CCC;
box-shadow: 0px 1px 1px #CCC;
padding: 0px 20px 20px 0px;
-webkit-border-radius: 7px;
-moz-border-radius: 7px;
border-radius: 7px;
min-height:220px;
}
Now the only thing I want to do is invert the code so that the picture is now on the left and the description on the right but it seems when I do that the span4 does not go on the side of the span8 but instead under it.
<div class="container">
<div class="cent text-center">
<div class="row box" style="border:1px solid #CCC; padding:15px 0px 15px 0px;">
<div class="span8 section">
<h3 align="center">Title</h3>
<div class="team">
<p class="team">this is the description about the picture this is the description about the picture this is the description about the picture this is the description about the picture.</p>
<div class="span4" style="height:200px;"><div class="profile pro"><img src="http://icons.iconarchive.com/icons/deleket/sleek-xp-software/256/Yahoo-Messenger-icon.png" /></div><!----profile END---></div><!---span4--->
</div><!---team END--->
</div><!---span8--->
</div><!---Row END--->
</div><!----cent END--->
</div><!--container END-->
You have a lot of unnecessary code in there. Maybe this is not exactly what you are looking for but instead of trying to figure out the code you provided, I just started fresh and provided a much cleaner way of doing what you want to accomplish.
You should modify your question as you ask for what already is. At the top you say: "basically I have a span4 with a picture on the left side then a span8 with a paragraph describing the picture on the right side." but then down below you say "now the only thing I want to do is invert the code so that the picture is now on the left and the description on the rite but it seems when I do that the span4 does not go on the side of the span8 but instead under it."
the key is to use the "float" property.
here is the html:
<div class="container">
<div class="span4">
<img src="http://icons.iconarchive.com/icons/deleket/sleek-xp-software/256/Yahoo-Messenger-icon.png" />
</div>
<div class="span8">
<div class="span8-text">
<h3>Title</h3>
<p>this is the description about the picture this is the description about the picture this is the description about the picture this is the description about the picture.</p>
</div>
</div>
</div>
and the css:
.container {
position: relative;
clear: both;
text-align: center;
}
.span4 {
float: right;
width: 200px;
}
.span8 {
position: relative;
float: left;
width: 350px;
}
here is the jsfiddle: http://jsfiddle.net/h69Bh/
Use CSS float property span8 float:left and span4 float:right
Take a look DEMO
This is it:
add this in head section below all links to bootstrap cdn :
<style>
img{
width: 100%;
height: 100%;
}
</style>
and this in body tag:
<div class="container img-responsive">
<div class="row">
<div class="col-8 col-sm-8 col-md-8 col-lg-8 col-xl-8">
description goes here
</div>
<div class="col-4 col-sm-4 col-md-4 col-lg-4 col-xl-4">
<img src="1.jpg">
</div>
</div>
<div>
check responsiveness:https://jsfiddle.net/sugandhnikhil/c0zoq8e1/1/
In this fiddle : http://jsfiddle.net/H4F8H/16/
I'm attempting to center two divs by wrapping an outer div and centering it :
<div style="margin-left:auto;margin-right:auto;">
But the divs are remaining left aligned. How can I center these divs on page ?
fiddle code :
HTML :
<div style="margin-left:auto;margin-right:auto;">
<div id="block">
<img height="50" style="max-width: 50px;background-position: top left;" src="http://socialmediababe.com/wp-content/uploads/2010/12/administrator.jpg" />
<div style="font-size:20px;font-weight:bold;">
Test
</div>
<div>
Google
</div>
</div>
<div id="block">
<img height="50" style="max-width: 50px;background-position: top left;" src="http://socialmediababe.com/wp-content/uploads/2010/12/administrator.jpg" />
<div style="font-size:20px;font-weight:bold;">
Test
</div>
<div>
Google
</div>
</div>
</div>
CSS :
*{
margin:0;
padding:0;
}
#block {
margin-right:100px;
border-width: 2px;
border-color: #4682B4;
background-color: WHITE;
width: 100px;
text-align: center;
line-height:30px;
padding:3px 0;
float:left;
}
img{
float:left;
}
#block:hover {
background-color: #C2DFFF ;
}
div is a block level element by default so it will take up 100% of horizontal space if you do not assign some width to it, so you need to assign some width to your container
<div style="margin-left:auto;margin-right:auto; width: 300px;">
Here, you can just set the width accordingly. Also avoid using inline CSS.
Your CSS is lil sloppy, for example margin-right:100px; is not required, also, you can use shorthand like
margin: 0 auto; = margin-left:auto; margin-right:auto;
Demo (Added a red border just to show the boundaries)
Note: You are floating your elements, so make sure you clear your floats either by using <div style="clear: both;"></div> which I've already done in the demo provided, else you can also use the snippet below to self clear the parent like
.clear:after {
display: table;
clear: both;
content: "";
}
A couple things I want to point out in this post:
You have set Id="block" in two different instances. Id's are meant to be unique. If you want a reusable identifier you should be using classes.
Inline styling should be avoided when possible. In this case there is no need to set inline styling on the parent div.
There is more then one way to center div's
I am going to leave this link here: http://thenewcode.com/723/Seven-Ways-of-Centering-With-CSS
This would be my solution:
html:
<div class="container">
<div class="block">
<span>Test</span>
</div>
<div class="block">
<span>Test 2</span>
</div>
</div>
css:
.container {
display: flex;
justify-content: center;
align-items: center;
}
.block {
display: flex;
background: grey;
width: 30%;
height: 200px;
border: 1px solid #777;
margin: 5px;
}
Give a width to that container.
#outerdiv{
margin-left:auto;margin-right:auto;
width:500px;
}
<div align="center">
<!-- -staff ->
</div>
margin:auto; doesn't work unless the width is specified...
<div style="margin:auto;width:100px;">
your content here. [Replace the width with your choice]
</div>
Giving width and margin auto will centralise the content in specified width.
<div style="margin-left:auto;margin-right:auto;width:400px;">//give variable width here..Normally 1000 to 1018..
<div id="block">
<img height="50" style="max-width: 50px;background-position: top left;" src="http://socialmediababe.com/wp-content/uploads/2010/12/administrator.jpg" />
<div style="font-size:20px;font-weight:bold;">
Test
</div>
<div>
Google
</div>
</div>
<div id="block">
<img height="50" style="max-width: 50px;background-position: top left;" src="http://socialmediababe.com/wp-content/uploads/2010/12/administrator.jpg" />
<div style="font-size:20px;font-weight:bold;">
Test
</div>
<div>
Google
</div>
</div>
</div>
Like this
DEMO
CSS
.container{
width:960px;
margin:0 auto;
text-align:center;
border:1px solid red;
}
My knowledge of css and html is fairly limited. I am trying to make tiles that contain an image and one line of text, and these tiles should go next to each other, then continue on the next line if the screen's width has been used.
This image shows what I need. The blue areas are images, the text below it is horizontally aligned center. The tiles are 160px wide, their height depends on how long the text is, but should be at least 150px. I know I have to work with divs, obviously, but I can't really get any further than that.
HTML
<div><img src=".jpg" width="110" />text</div>
.
.
.
<div><img src=".jpg" width="110" />text</div>
CSS
div{
width:160px;
border:1px solid grey;
text-align:center;
min-height:150px;
height:auto;
vertical-align:middle;
padding:8px;
float:left
}
img{display:block; margin:0 auto}
DEMO
Resize the result part to see the effect
min-height:150px make default height as 150px
height:auto helps to extend the div based on the content.
float:left makes divs to sit next to each other.
Have you seen this image gallery example in w3schools-
http://www.w3schools.com/css/css_image_gallery.asp
Sample Code-
Html-
<div class="img">
<a target="_blank" href="klematis_big.htm"><img src="klematis_small.jpg" alt="Klematis" width="110" height="90"></a>
<div class="desc">Add a description of the image here</div>
</div>
<div class="img">
<a target="_blank" href="klematis2_big.htm"><img src="klematis2_small.jpg" alt="Klematis" width="110" height="90"></a>
<div class="desc">Add a description of the image here</div>
</div>
<div class="img">
<a target="_blank" href="klematis3_big.htm"><img src="klematis3_small.jpg" alt="Klematis" width="110" height="90"></a>
<div class="desc">Add a description of the image here</div>
</div>
<div class="img">
<a target="_blank" href="klematis4_big.htm"><img src="klematis4_small.jpg" alt="Klematis" width="110" height="90"></a>
<div class="desc">Add a description of the image here</div>
</div>
Css-
div.img
{
margin: 2px;
border: 1px solid #0000ff;
height: auto;
width: auto;
float: left;
text-align: center;
}
div.img img
{
display: inline;
margin: 3px;
border: 1px solid #ffffff;
}
div.img a:hover img {border: 1px solid #0000ff;}
div.desc
{
text-align: center;
font-weight: normal;
width: 120px;
margin: 2px;
}
Have a look at this:
http://jsfiddle.net/LX6EY/
HTML
<div class="element">
<p>Some content goes in here!</p>
</div>
<div class="element">
<p>Some content goes in here!</p>
</div>
<div class="element">
<p>Some content goes in here!</p>
</div>
CSS
.element { background: #666; border: 1px solid #000; color: #fff; float: left; height: 260px; padding: 20px; width: 210px; }
For more information about floats please see here, they're incredibly useful, and at the moment pretty vital to the layout of most websites.