DEMO LINK
I want to have <p> text displayed in line with the image so everything will look centered and in-line correctly.
Also when screen is shorter and text takes 2+lines (responsive), I'd like this to remain the same as well so the text doesn't jumo below the image.
How can I achieve that?
Replace <p> with <span>. Then do:
.tip span {
margin-left:10px;
}
img {
vertical-align: middle;
}
Notice that you don't need display: inline-block on your span.
DEMO REVISED
changed
.tip p {
display:inline;
margin-left:10px;
}
and added:
.tip img {
float:left;
}
inline-block to inline so that it acts in line within the parent div. float:left; to keep the image on the left side of the parent div.
Try this...This code below works!
<img src="" alt="" style="width:32px;height:32px;float:left;">
<p style="margin:0px;height:32px;max-idth:100%;float:left;overflow:auto;">TEST</p>
change the 32px to one size that suits you
the style float:left; does the thing you want here
Related
JSFiddle link -Code
I have wasted an hour on this stupid problem. I have made projects and it worked. I deleted that code in rage.
I wanted to center an image but there was a heading above the image. So, i wrapped them in a div and gave them a id[x].
What i tried #x - margin:0 auto width:50%; margin:auto; width:50%; margin: 0 auto; width:50%; margin-left:auto; margin-right:auto; and changing positions to relative.
What worked [not wrapped in a div] -
img {
display:block;
height: 200px;
width: 200px;
margin: auto;
}
h1 {
color:blue;
text-align:center;
}
But this code had a problem as the image is clickable, the whole width of where the image was became clickable, i don't know why.
You cannot have a block element inside an inline element. The anchor that the image would be wrapped in is an inline element. When you turn the child into a block element it will make the anchor take the entire width of the line, because you don't have a width setting on the anchor.
To fix this issue, display:block; should be display:inline-block;
Use text-align: center to center the image.
#test {
text-align: center;
}
img {
display: inline-block;
height: 200px;
width: 200px;
}
h1 {
color:blue;
}
<div id="test">
<h1>Hi, I am guy!</h1>
<a href="#">
<img src="//lorempixel.com/200/200">
</a>
</div>
if I understand your problem you want to both center the header and image that are wrapped in a div. You do not want the entire area of the div clickable just the image. Below is a fiddle.
If the above is correct it seems you just need to add the a tag around the img tag and not the div itself.
<div>
<h1>Header</h1>
<img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=200%C3%97200&w=200&h=200" />
</div>
https://jsfiddle.net/gward90/7s45osxa/
UPDATE:
display: block will take up the width of the parent element everytime, as others have said use inline-block.
Only apply size to the img tag, and apply display to the a tag. The wrapper class with text-align: center is actually taking care of centering the img as well.
Here is the updated fiddle:
https://jsfiddle.net/gward90/7s45osxa/3/
Here is also your fiddle updated with my suggestions
https://jsfiddle.net/gward90/aLxecdk6/5/
Here's my stripped-down code:
<style>
div{
height:100px;
background-color:black;
}
span{
font-size:60pt;
background-color:yellow;
}
img{
height:100px;
background-color:yellow;
}
</style>
<div>
<span>ASDF</span>
<img src="foo"/>
</div>
(fiddle: http://jsfiddle.net/pM2jE/)
How come the "ASDF" is misaligned with the rest of the DIV??
I suspect, somehow, that the bottom of the word "ASDF" is aligning with the rest of the DIV, and so the SPAN as a whole doesn't actually match up. I have no idea how to fix this.
Add this css to your image class
vertical-align: top;
By default, the vertical-align for a span is "baseline", which will align the contained text to the bottom of the parent container. Adding a:
vertical-align: top;
CSS property will align the top of the text to the top of the containing div.
use float:left or float: right in your this might help you align your span and div
I want to put text in the middle of the box in CSS3, but it's not working for some reasons.
Here's my code snippet (with code from Angularjs):
<div class="a" ng-repeat="i in l | filter:query">
<a class="b" href="{{i.a}}">{{i.b}} {{i.c}}</a>
</div>
And here's my css:
.b {
display: inline-block;
float: left;
margin: 8px;
height: 20px;
width: 100px;
}
And even if I add vertical-align: middle; to the above CSS, it doesn't put the text in the middle of the box... why?
Thanks.
You need to use css table-cell
DEMO http://jsfiddle.net/LstNS/31/
.b {
display: table-cell;
vertical-align: middle;
}
.a {
display: table;
height: 200px;
border: black thin solid;
}
vertical-align requires a lot of things to work right...
easiest method , and what I do, is just use line-height
so do
.b {
line-height: 20px;
}
adjust number of pixels accordingly, but that will center the text vertically for you
float kills display and so vertical-align if avalaibe.
inline-blocks element can be vertical-align aside text, other inline-boxes or on the line-height.
In your case , line-height alone will give height of parent (if unprecised) and set the link on it, right in the middle :), no need to give an inline-block display to <a> unless you need it to size it for instance (or whatever else style that needs layout) .
If .a has an height, give it an equal line-height.
Line-height works fine as long as you have one line of text.
if you want to use inline-block, and set middle alignement from itself it won'nt work, you need at least 2 elements as another inline-boxe, so it can center from something ... an extra box or pseudo-element might help.
.a {height:300px;}
.a:before {
content:'';
height:100%;
}
.a:before, .a a {
display:inline-block;
vertical-align:middle;
}
Else, vertical-align works on content of <td> or element wich receive a display:table-cell;. .a could then receive a display:table-cell and vertical-align and eventually an height. Usually it needs a parent as display:table to work fine.
.a {
display:table-cell;
height:200px;
vertical-align:middle;
}
I have no special links on tutorial for vertical-align , on W3C it is confusing somehow since both vertical-align for inline-box and cell content are dispatched in different documents.
I have a div that is display:table; - inside that div there are two display:table-cell.
one table-cell is a span holding and img,and the other is span holding text,
for some reason there is a space between the two display:table-cell that I don't want.
how can I made the table-cells be one next to each other?
here is my html:
<div class="statusCommentUser">
<span><img src="/Content/Images/contactDemo_small_image.png" class="SmallUserImg"></span>
<span>Sounds great, man!</span>
</div>
here is my css:
.statusCommentUser {
width:450px;
height:50px;
display:table;
}
.statusCommentUser span {
display: table-cell;
vertical-align: middle;
}
When you assign css rule display:table-cell to any element, it behaves as any td element of some table. So, in that case, it auto adjusts itself according to the parent width and the number of other tds in the same row, only when, you don't specify a width to this td.
That's why both your span cum TDs are taking that width.
simply assign a width to the first one, it should solve your problem.
i.e. try adding this class
.statusCommentUser span:first-child{
width:50px;
}
see the demo
Moreover, if all that you want is to position your image span and text span horizontally aligned, you can do it through many other ways i.e. change your css classes to this:
.statusCommentUser {
width:450px;
height:50px;
}
.statusCommentUser span {
float:left;
}
.statusCommentUser span:last-child{
position:relative;
top:40px;
}
see this demo
See Demo Here
Just add class to the span which contains your image and then set the width
HTML
<div class="statusCommentUser">
<span class="user"><img src="http://placehold.it/30x30/" class="SmallUserImg"></span>
<span>Sounds great, man!</span>
</div>
CSS
span.user {
width: 35px;
}
If the div is acting like a table, try adding this to .statusCommentUser:
border-collapse: collapse;
This CSS is used to remove the spacing between cells in a table.
The space comes from the newline and indentation between the two <span>s.
Try this:
<span><img width="100" height="100" class="SmallUserImg"></span><span>Sounds great, man!</span>
What about this:
.statusCommentUser img
{
width: 100%;
height: 100%;
float: left;
}
Your image will become the total size of your cell. Also your image has to be floated to be positioned in the cell (OP example the image is not in the middle of the cell).
To prevent stretching of the image, you can make a static width of the image span. Or you can make the cell adjust automatically based on the image size. However you would have to remove the static width of your div tabel.
Manish Mishra's image used for dummy image ^^
jsFiddle
I was facing the same problem and was able to resolve by adding the property in display:table-cell element
border-spacing: 0;
Hope it solves for those still looking
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.