I have problems with divs. I would like the link "Go" to be right aligned and vertically middle of its parent div. I have tried several ways, but no success yet.
And here you can see my HTML and CSS code:
div.row {
position: relative;
border-bottom: 1px dotted #999999;
}
div.list div.name {
float: left;
width: 40%;
}
div.list div.info {
float: left;
width: 60%;
}
div.list div.action {
display: inline-block;
text-align: right;
vertical-align: middle;
}
<div class="list">
<div class="row">
<div class="name">
<span>1</span>
<br />
1
<br />(2015-09-30)
</div>
<div class="info">
<b>Place:</b>
<br />Now 6
<br />Later 32
<div class="action">
Go
</div>
</div>
</div>
</div>
So, if you have better ideas and know how I could solve my problem, I would love to hear.
If possible, I'm looking for a cross-browser solution. No JavaScript/jQuery allowed this time.
For a parent with a dynamic height and cross browser functionality, you will need to use an older CSS2 trick, using display: table-cell inside a display: table div. This explains it in more detail
HTML
<div class = "info-left">
<b>Place:</b>
<br />Now 6
<br />Later 32
</div>
CSS
.info{
display: table;
}
div.info div.action{
display: table-cell;
vertical-align: middle;
}
Here's a fiddle
Related
For my class I have to have 3 divs floated left in a row with the outer two half the size of the middle one. It's driving me crazy that the rows aren't centered on the page. Is there a way to center them without getting rid of the float?
I tried creating a container div with text-align just as a shot in the dark but that didn't work. All other research I've seen is to change the float to display but I have to use float so I can't do that.
div.container {
width: 100%;
text-align: center;
border: none;
background-color: pink;
height: 100%;
}
div.cover {
width: 20%;
}
div.author {
width: 50%;
font-family: calibri;
}
div.links {
width: 20%;
}
<div class="cover">
<p class="inner">
<img src="Images/Divergent.jpg"><br>
</p>
</div>
<div class="author">
<p class="inner" style="margin-top: 10px;">
<b>Divergent<br>Veronica Roth</b><br>
</p>
</div>
<div class="links">
<ul>
<li>
<p class="link" onclick="parent.open('https://www.britannica.com/biography/Veronica-Roth')">
https://www.britannica.com/biography/Veronica-Roth
</p>
</li>
</ul>
</div>
Your instinct to wrap the 3 "columns" in a container div is correct. This allows you to use what is commonly referred to as the "clearfix" trick. Items that are "floated" are ignored by the normal box flow of the page which is why the container seems to collapse and ignore your floating contents.
Frustrating indeed!
This is the "clearfix":
div.container:after {
content: ''; /* no content in this pseudo element */
display: table; /* be 100% wide */
clear: both; /* clear the previous floats */
}
The :after pseudo selector on the container is the same thing as putting an empty div as the last item in the container. By clearing the floats, the container will wrap around the floating items.
This is a hack... but it works! The entire web development community has used this to "fix" the difficulties inherent with using floats for years to create layouts before the advent of real layout systems like Flexbox and CSS Grid.
After the container clears the floating items inside, just set the widths so that they add up to 100% and you are good.
div.container {
width: 100%;
text-align: center;
border: none;
background-color: pink;
height: 100%;
}
div.container:after {
content: '';
display: table;
clear: both;
}
div.cover {
width: 25%;
float: left;
}
div.author {
width: 50%;
font-family: calibri;
float: left;
}
div.links {
width: 25%;
float: left;
}
<div class="container">
<div class="cover">
<p class="inner">
<img src="Images/Divergent.jpg"><br>
</p>
</div>
<div class="author">
<p class="inner" style="margin-top: 10px;">
<b>Divergent<br>Veronica Roth</b><br>
</p>
</div>
<div class="links">
<ul>
<li>
<a href="https://www.britannica.com/biography/Veronica-Roth">
Veronica-Roth
</a>
</li>
</ul>
</div>
</div>
div.container position:relative;
div.cover float:left;
div.autor put inside tag align="center"
div.links float:right;
or
div.autor margin:5%;
or
display:inline-block;
or you can use text-align:center; in css on the parent div and then display:inline-block; on each div inside the parent div
In the following snippet, I have a title and an image, both divs are within a container div. the image is floated right and will have a fixed height of 80px. What I want is title on the left, image on the right side of the same row, and the text the bottom aligned with the image. First I tried inline-block on .text-element and inline on .text-element-content, but vertical-align doesn't seem to work there. After a few tries and some reading, I came up with the following solution with display: table/table-cell, plus setting a fix height for .text-element, then the vertical-align: bottom worked. But then I saw another (small) problem. Now the lowerste point of "p" in title text is on the same line with the bottom line of image. But I want the bottom of other letters like "e", "d", "t" on the same line with the image-bottom line. I tried vertical-align: baseline but it seems it is for something else entirely... Is there a way to achieve what I want? And is there a better way to get vertical-align: bottom without table/table-cell? For certain reason, I may not change the DOM, only the CSS on it, and I may not use flex-box either.
The solution with a different line-height won't solve my problem entirely because it only works with this special case and as soon as the font is changed, I'll need another line-height.
.container-element {
position: relative;
}
.image {
float: right;
}
.text-element {
display: table;
height: 80px;
}
.text-element-content {
display: table-cell;
vertical-align: bottom;
}
<div class="container-element">
<div class="image">
<img src="https://image.ibb.co/eTiV6a/Unbenannt_1.png">
</div>
<div class="text-element">
<div class="text-element-content">I'm a title with help</div>
</div>
</div>
You could try adjusting the line-height property for the text:
.container-element {
position: relative;
border-bottom: 1px solid red;
}
.image {
float: right;
}
.text-element {
display: table;
height: 80px;
line-height: .7;
}
.text-element-content {
display: table-cell;
vertical-align: bottom;
}
<div class="container-element">
<div class="image">
<img src="https://image.ibb.co/eTiV6a/Unbenannt_1.png">
</div>
<div class="text-element">
<div class="text-element-content">I'm a title with help</div>
</div>
</div>
Even though you stated, that you cannot use flex-box (because of IE), I will answer with a flex-box solution. IE11 works fine with flexbox. See Known issues on caniuse.com.
Combined with order a solution could look something like this:
.container-element {
display: flex;
justify-content: space-between;
align-items: baseline;
}
.image {
order: 2;
}
.text-element {
order: 1;
}
<div class="container-element">
<div class="image">
<img src="https://image.ibb.co/eTiV6a/Unbenannt_1.png">
</div>
<div class="text-element">
<div class="text-element-content">I'm a title with help</div>
</div>
</div>
This should do it inspired by bootstrap.
.container-element {
position: relative;
}
.media-left,.media-right {
display: table-cell;
vertical-align: top
}
.media-right {
padding-left: 10px
}
.media-left {
padding-right: 10px
}
.media-bottom {
vertical-align: bottom
}
<div class="container-element">
<div class="media-left media-bottom">
I'm a title with help
</div>
<div class="media-right">
<img src="https://image.ibb.co/eTiV6a/Unbenannt_1.png">
</div>
</div>
I've been trying to center some text vertically within a div and after a while browsing StackOverflow I finally came up with this:
.frame {
height: 500px;
border: 2px solid black;
}
.helper {
display: inline-block;
height: 100%;
vertical-align: middle;
}
.centerText {
display: inline-block;
vertical-align: middle;
}
<div class="col-md-8">
<div class="frame">
<span class="helper"></span>
<div class="centerText">
<p>This is a short paragraph.</p>
<br />
<p>More stuff.</p>
<br />
<br />
<p>etc.</p>
</div>
</div>
</div>
This works fine when I have a short paragraph, as above. But I tried changing the paragraph and found that when I make it long enough that it would have to go onto another line, the whole paragraph got moved to below the "frame" div.
See here: fiddle
If I take away the span the long paragraph will go to the next line within the frame just fine, but it's no longer vertically centered.
What is going on here? How can I have a long paragraph that doesn't make all of the text get pushed out of the div?
Get rid of the height: 100% within your .helper.
Does that solve your problem?
If not, please let me know so I can help you with this.
Cheers,
Try this here:
- I also added some padding to the <p> element so it doesn't hug the edges of the div.
.frame {
height: 500px;
border: 2px solid black;
}
.helper {
display: inline-block;
vertical-align: middle;
}
.centerText {
display: inline-block;
vertical-align: middle;
}
p {
padding: 5px;
}
<div class="col-md-8">
<div class="frame" id="frame2">
<span class="helper"></span>
<div class="centerText">
<p>This is a long paragraph. Like realy long. Too long to fit on one line in the frame. Goes to the next line. Which should be ok but for some reason isn't.
<br />
More stuff.
<br />
<br />
etc.</p>
</div>
</div>
</div>
I hope this helps
Your problem is that the helper, the centerText block and the space between them amounts to more than 100% width, so the centerText block overflows out of the frame.
To fix, adjust the horizontal margin of the helper to compensate for the space. There's no magic value for this - it depends on the container's font - but in your jsfiddle example, a value of -4px works. ( .helper { margin-left:-4px; } )
See http://jsfiddle.net/tngqjswm/18/
Aside 1: There are other ways of removing/hiding the space between inline-level elements
Aside 2: The helper span is a good candidate for being replaced by a pseudo-element in CSS. See http://jsfiddle.net/tngqjswm/19/
Set the parent .frame to display: table and the two children to display: table-cell
.frame {
height: 500px;
border: 2px solid black;
display: table;
}
.helper {
display: table-cell;
height: 100%;
vertical-align: middle;
}
.centerText {
display: table-cell;
vertical-align: middle;
}
FIDDLE
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/