Having a problem vertically centering my span inside my div.
HTML:
<div id="rcontainer" style="width:100px;">
<div id="accinfo" style="height:50px; overflow:hidden;">
<img src="images/default-avatar.png" id="accavatar" />
<span id="inneraccinfo">
Level X <br />
Win/loss X
</span>
</div>
</div>
CSS:
#accavatar {
resize:both;
width:50px;}
#accinfo {
position: relative;
left: 10px;
top: 10px;
display: inline;}
#inneraccinfo {
font-family:my_fat_font;
color: white;}
Fiddle, with about the same structure:
http://jsfiddle.net/6jnte8da/1/
I want to vertically align the span element incasing "level x" & "win/loss X", with respect to the image.
In advance - Thank you
Just use display:table-cell in conjunction with display:table for parent. Fiddle here: http://jsfiddle.net/6jnte8da/2/
Remove all style tags from HTML
<div id="rcontainer">
<div id="accinfo">
<img src="images/default-avatar.png" id="accavatar" />
<span id="inneraccinfo">
Level X <br />
Win/loss X
</span>
</div>
</div>
And try something like this for css
#rcontainer {
height: 50px;
}
#accavatar {
width:50px;
}
#accinfo {
height: 50px;
display: inline-block;
width: 200px;
}
#accinfo img {
vertical-align: top;
}
#inneraccinfo {
font-family:my_fat_font;
color: white;
display:inline-block;
}
Related
I have this code, which aligns two images to left and right side of the page with space between:
.center {
width: 100%;
display: table;
}
.leftk {
display: table-cell;
}
.rightk {
display: table-cell;
text-align: right;
vertical-align: middle;
}
<div class="center">
<div class="leftk">
<img src="http://loremflickr.com/300/200" />
</div>
<div class="rightk">
<img src="http://loremflickr.com/400/100" />
</div>
</div>
<span>Text</span>
I tried to do the same with inline-block, but I am unable to align vertically right image to center. Can you please show me a quick example to how to get same result with inline-block?
Edit: If page size is smaller than image width, I want to display them under each other.
Here is how you do it with inline block:
jsFiddle
.center {
font-size: 0; /*remove white space*/
text-align: justify;
}
.center:after {
content: "";
display: inline-block;
width: 100%;
}
.leftk,
.rightk {
font-size: 16px;
display: inline-block;
vertical-align: middle;
}
<div class="center">
<div class="leftk">
<img src="//dummyimage.com/200x200" />
</div>
<div class="rightk">
<img src="//dummyimage.com/100x100" />
</div>
</div>
you can use css3 flexbox instead,
use display:flex instead of display:table
add justify-content:space-between;
it's works fine.
.center {
width: 100%;
display: flex;
justify-content:space-between;
align-items:center;
}
.leftk>img {
width:100px;
height:100px;
}
.rightk>img {
width:50px;
height:50px;
}
<div class="center">
<div class="leftk" style="display: table-cell;">
<img src="https://i.stack.imgur.com/wwy2w.jpg"/>
</div>
<div class="rightk">
<img src="https://i.stack.imgur.com/wwy2w.jpg"/>
</div>
</div>
<span>Text</span>
Sorry for the title, this is hard to explain in one sentence. Basically, I have a div container with two divs: 1 image that is float:left(ed) and another one with text. Here is what it looks like:
<div id="container">
<img src="http://boxedinfinity.com/wp-content/uploads/2013/12/Halo3.jpg" alt="Game Image" id="gameImage">
<div id="second">
<h2>Genre:</h2>
<p>First Person Shooter</p>
</div>
</div>
And here is a fiddle of what I am doing:
http://jsfiddle.net/qMQL5/880/
I want to add padding to the p part of the div with the text. As you see, I added margin-left:50px to #second p but it doesn't do anything. Basically, I want to "indent" the text "First Person Shooter" but I am having trouble doing this. Any ideas?
Update:
This is the result of your actual code now:
So, as you can see it is applying, but you have to know a few things:
img tag is an inline element
The IMG element embeds an image in the current document at the
location of the element's definition. The IMG element has no content;
it is usually replaced inline by the image designated by the src
attribute, the exception being for left or right-aligned images that
are "floated" out of line.
since you are floating the img tag it will start behaving like an inline-block element
Floating an inline or block level element will make the element behave
like an inline-block element (from here).
So, therefore, there is a few solutions to fix this issue:
Solution #1
(a quick fix [as you can see by adding a border to your #container]- I would advise to read the other solutions below)
only using you existing HTML markup and CSS:(which will make both <h1> and <p> indented)
make your img an block element by applying display:block (optional - to fix gap below img tag)
removing margin-left from p and adding margin-right to img
#container {
border:1px solid red
}
#gameImage {
width: 100px;
float: left;
height: auto;
display:block; /*new - optional*/
margin-right:10px /*new*/
}
#second {
background-color: green;
}
<div id="container">
<img src="http://boxedinfinity.com/wp-content/uploads/2013/12/Halo3.jpg" alt="Game Image" id="gameImage" />
<div id="second">
<h2>Genre:</h2>
<p>First Person Shooter</p>
</div>
</div>
Solution #2
Since you are using float already, let's go with clearfix
.clearfix:before,
.clearfix:after {
content: " ";
display: table;
}
.clearfix:after {
clear: both;
}
#container {
background-color: green;
border:1px solid red;
}
#second {
float:left;
/* background-color: green; /*choose what block will have the background*/ }
#gameImage {
width: 100px;
float: left;
height: auto;
}
#second > p {
padding-left: 10px;
box-sizing: border-box;
<div id="container" class="clearfix">
<img src="http://boxedinfinity.com/wp-content/uploads/2013/12/Halo3.jpg" alt="Game Image" id="gameImage" />
<div id="second">
<h2>Genre:</h2>
<p>First Person Shooter</p>
</div>
</div>
Solution #3
dropping the floats and using display:table/table-cell
#container {
display:table;
width:100%;
background-color:green;
border:1px solid red;
}
#container > div {
display:table-cell;
vertical-align:top;
}
#container > div:first-child, #container > div > img {
width:100px
}
#container > div > img {
display:block
}
#container > #second > p {
padding-left:10px
}
<div id="container">
<div>
<img src="http://boxedinfinity.com/wp-content/uploads/2013/12/Halo3.jpg" alt="Game Image" id="gameImage" />
</div>
<div id="second">
<h2>Genre:</h2>
<p>First Person Shooter</p>
</div>
</div>
Solution #4
using inline-block
#container {
width: 100%;
background-color: green;
font-size: 0;/* fix for inline-block elements gaps*/
border:1px solid red;
}
#container > div {
display: inline-block;
vertical-align: top;
font-size: 16px /* fix for inline-block elements gaps*/
}
#container > div:first-child,
#container > div > img {
width: 100px
}
#container > div > img {
display: block
}
#container > #second > p {
padding-left: 10px
}
<div id="container">
<div>
<img src="http://boxedinfinity.com/wp-content/uploads/2013/12/Halo3.jpg" alt="Game Image" id="gameImage" />
</div>
<div id="second">
<h2>Genre:</h2>
<p>First Person Shooter</p>
</div>
</div>
NOTE:
You may want to take a look at some articles regarding floats, here and here
Your margin on #second must be as large as your image (100px) + the padding you want. Try with margin-left: 150px you will see.
Just use the space well with giving width to each element. You can give width as px or in % . You can try this
#second {
background-color: green;
float:left;
width:80%;
}
The non-floating element actually takes the entire width of the frame.
img {
float: left;
opacity: .75;
}
div {
background: aqua;
padding-left: 50px; /*nothing happens visually*/
}
<img src="http://lorempixel.com/150/150" />
<div>Hello</div>
To fix it you could simply set overflow:auto on it.
img {
float: left;
opacity: .75;
}
div {
background: aqua;
overflow: auto;
padding-left: 50px;
}
<img src="http://lorempixel.com/150/150" />
<div>Hello</div>
I'm not exactly sure what you're trying to achieve with the green box, but If you're just looking to keep things as they are, you need to make the <p> element and inline-block element so that it respects the floating <img> element and doesn't just wrap around it.
#second p {
display: inline-block;
margin-left: 10px;
}
http://jsfiddle.net/0za19kcx/
I know there a many of these about but for some reason I keep failing to implement them.
So I need the content in the class .infobox to be in the middle of the div. So I need it aligned vertical and horizontally.
I have put ALL my code below as some of the "fixes" I tried worked but caused the layout to move and so on. So hopefully you guys can get it aligned without causing the layout to break.
Fiddle is at the bottom. On a side note if you have any tips on how to neaten the layout code please do let me know. But the main problem is aligning the content.
HTML:
<div id="con">
<div id="box">
<div id="header"><h1>Test</h1></div>
<div id="left">
<div class="infobox">Test: <br /> <input /> </div>
<div class="infobox">Test: <br /> <input /> </div>
<div class="infobox">Test: <br /> <input /> </div>
<div class="infobox">Test: <br /> <input /> </div>
</div>
<div id="right">
<div class="resultbox">
<ul>
<li>Test <br />Test</li>
</ul>
</div>
<div class="contactbox">
<ul>
<li>Phone Number: <br /> 00000 000000</li>
<li>Email: <br /> test#Test.com</li>
</ul>
</div>
</div>
</div>
</div>
CSS:
div {
outline: 1px solid #000;
}
#box {
width: 580px;
height: 300px;
}
#header {
height: 15%;
background: url(http://us.123rf.com/400wm/400/400/mechanik/mechanik1112/mechanik111200003/11665900-vector-cartoon-semi-truck.jpg) no-repeat;
background-size:80px 40px;
background-position:right top;
}
#left {
width:70%;
height: 85%;
float: left;
}
#right {
width:30%;
height: 85%;
float: right;
}
.infobox {
width: 50%;
height: 50%;
float: left;
text-align: center;
}
.resultbox {
width: 100%;
height: 50%;
}
.contactbox {
width: 100%;
height: 50%;
font-size: 12px;
}
.contactbox ul, .resultbox ul {
margin: 0;
}
.contactbox li, .resultbox li {
list-style: none;
}
DEMO HERE
What I have tried:
Tried to use padding-top and padding-bottom - This seemed to not align it correctly and then I couldn't get the layout to sit correctly.
Also looked into using position: relative and position: absolute but I have never been too good with them and couldn't manage to get the content to sit where I wanted it to.
I took the liberty of manipulating you mark-up a bit and added an extra div to achieve the output.
Fiddle
HTML
<div class="infobox">
<div class="cent">Test:
<br />
<input />
</div>
</div>
CSS
.infobox > .cent {
outline: 1px solid #0F0;
vertical-align: middle;
margin-top:20%;
}
Whats happening here??? : since your content div infobox has the styling, to give a different set of styling to inner content(which is not floating), you have to use a them under a child div for display!
add margin:0 auto; to #box
like so: http://jsfiddle.net/c82DU/2/
You could take a look at this site, it explains a bit about tables.
The layout u are using looks like a table, so why not use tables? easier text aligning
http://www.w3schools.com/html/html_tables.asp
UPDATE: The answers have got me close, but they still don't align vertically as the text div is larger, how can I make them both the same height and therefore align?
I would like to have two DIVs next to each other, one containing an image and one containing text, both sitting in a container DIV.
The image should be 15% of the width of the container div, with the text using the remaining 85%
The image and text should be aligned vertically within their respective DIVs, so it looks like they are aligned with each other.
I've tried to work this out but can't seem to do it! Can anyone help?
#picture {
float: left;
width: 15%;
line-height: auto;
}
#text {
width: auto;
padding-left: 16%;
line-height: auto;
vertical-align: middle;
margin-top: auto;
margin-bottom: auto;
}
#text p {
display: inline-block;
vertical-align: middle;
line-height: normal;
}
and
<div id="quotes">
<div id="picture">
<img style="width: 100%; vertical-align: middle" src="tom.jpg" >
</div>
<div id="text">
<p>"Christiaan was one of the stand out candidates throughout, therefore there was no hesitation in offering him a place on this highly sort after scheme..."</p>
</div>
</div>
Here's a fiddle with your code in it: http://jsfiddle.net/hQ6Vw/1/
The only changes I made was to assign matching top/bottom margins to the img and p tags. I think that will give you the effect you're looking for.
If you use float and verticl-align, those two won'nt work together.
Float extract itself from regular flow and go slide on one side or the other on top of next line right after any content within the regular flow.
Vertical-align works:
in betweem inline-boxes (inline-block-level element or displayed so with display:inline-block;)
inside td or it's CSS default display : display:table-cell;
here jsfiddle #TXChetG updated
Using display:inline-block; http://jsfiddle.net/GCyrillus/hQ6Vw/2/
Using display:table/* table-cell*/;
http://jsfiddle.net/GCyrillus/hQ6Vw/3/
This should get you close:
<div>
<div style="background: grey; width: 15%; float:left"></div>
<div style="background: blue; width: 85%; float:left"></div>
</div>
Replace the grey background div with your image and the blue with your text.
Check this out
HTML:
<section>
<div id="one"></div>
<div id="two"></div>
</section>
CSS:
section {
width: 80%;
height: 200px;
background: aqua;
margin: auto;
padding: 10px;
}
div#one {
width: 15%;
height: 200px;
background: red;
float: left;
}
div#two {
margin-left: 15%;
height: 200px;
background: black;
}
Is this what you mean?
html
<div class="container">
<div class="images">
<img src="http://jsfiddle.net/img/logo.png" style="background-color:black">
</div>
<div class="text">
Example
</div>
</div>
<div class="container">
<div class="images">
<img src="http://jsfiddle.net/img/logo.png" style="background-color:black">
</div>
<div class="text">
Example
</div>
</div>
css
.container {
clear: both;
}
.images {
width: 15%;
float: left;
vertical-align: text-top;
}
.text {
width: 85%;
float: right;
vertical-align:text-top;
}
Why not just set the #text p display to display: inline or display:block; or use margins to align them?
<div id="quotes">
<div id="picture">
<img src="tom.jpg" />
</div>
<div id="text">
<p>"Christiaan was one of the stand out candidates throughout, therefore there was no hesitation in offering him a place on this highly sort after scheme..."</p>
</div>
</div>
Display the container div as table and the text and image divs as table-cell to make them the same heights. You can then centre the image vertically through vertical-align:middle.
#quotes {
display:table;
}
#picture {
width: 15%;
display:table-cell;
vertical-align: middle;
}
#text {
display:table-cell;
width:85%;
padding-left: 16%;
}
#picture img {
width: 100%;
}
http://jsfiddle.net/X3WsV/1/
In the given fiddle, I want first word align to the top of the image and second aligned at the bottom of the image.
http://jsfiddle.net/himanshuy/W6ATN/15/
I have tried line-height for the span and margin for the br element but nothing seem to work.
I re-arranged some of your html. First, I put the img element and the two span elements in their own divs. So there are two inline divs. I also added a style to one of the spans. You can see the end result here: http://jsfiddle.net/W6ATN/17/
In case that fiddle fails, here is the markup:
html
<div class="box">
<div class="logo">
<div class="inlineDiv">
<img src="c:\work\img\logo3.jpg" width="80" height="80" />
</div>
<div class="inlineDiv">
<span class="spanTop">YAD</span>
<span>HIM</span>
</div>
</div>
</div>
css
div.box {
background-color: #000000;
color: #FFFFFF;
width: 300px;
height: 400px;
text-align: center;
}
img {
margin-top:20px;
}
.inlineDiv
{
display:inline;
}
.spanTop
{
margin-top:10px;
position:absolute;
}
span {
font-size: 30px;
color: red;
clear:both;
line-height:45px;
}