Hi Everybody and tks in advance for your help... I'm looking for the best practice to resolve a simple question:
.left {
float: left;
width: 79%;
margin-right: 1%;
}
.left img {
float: right;
}
.right {
float: right;
width: 20%;
}
<div class="main">
<div class="left">
<img src="http://placehold.it/200x200" />
</div>
<div class="right">A TEXT</div>
</div>
How should I center the text vertically at the middle of the image (obviusly not using px in margin-top or bottom, because the width/height of the image will be dinamic).
Thanks!
You could use flexbox. See the example:
.main{
display: flex;
align-items: center;
}
https://jsfiddle.net/zb2ozq1k/1/
I'd get rid of float and use table-cells instead. Then, use vertical-align:middle for the text.
Like this:
.main{
display: inline-table;
border: 1px solid blue;
}
.left {
width: 79%;
margin-right: 1%;
display: table-cell;
border: 1px solid green;
}
.right {
width: 20%;
border: 1px solid red;
display: table-cell;
vertical-align: middle;
}
<div class="main">
<div class="left">
<img src="http://placehold.it/200x200" />
</div>
<div class="right">A TEXT</div>
</div>
h1 {
display: inline;
vertical-align:top;
}
<div class="middle">
<img src="http://placekitten.com/200/150" >
<h1>A TEXT</h1>
</div>
Related
I try to display a left and right area but it's not working actually with the cotes "right" and "left"
I tried the position :absolute but it's display me something strange
Maybe I'm doing something wrong with my conteneur div or my div element1
Someone knows how I can achieve that?
#conteneur {
padding-top: -25px;
display: flex;
border: 2px solid black;
padding-bottom: 10px;
}
#element1 {
display: block;
width: 350px;
border: 1px solid black;
}
.right {
float: left;
width: 100%;
}
.left {
float: right;
width: 100%;
}
<div id="conteneur">
<div id="element1">
<img src="{{ public_path('../public/uploads/logo-FFRXIII-2017-01.png')}}" style="max-width: 300px;">
<div id="right">
adresse_right
</div>
<div id="left">
adresse_left
</div>
</div>
</div>
you are using flexbox, so stick with flexbox and forget floats
#conteneur {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
width: 100%;
border: 1px solid black;
padding-bottom: 10px;
}
.img {
flex: 0 100%;
}
img {
max-width: 300px;
}
<div id="conteneur">
<div class="img">
<img src="http://placehold.it/300x200">
</div>
<div class="right">
adresse_right
</div>
<div class="left">
adresse_left
</div>
</div>
First of all your
<div id="right">
adresse_right
</div>
<div id="left">
adresse_left
</div>
Won't react to your CSS since these are ID's and in your CSS you are trying to find classes with the . selector. So change the . to a # or change your ID tags to Classes.
Secondly i've created a jsfiddle and edited your code hope this helps!
I am trying to create three separate rounded images on the same line. I managed to get two in the correct position but I can't get the last one to move up into the correct line.
.wrap {
width: 100%;
}
.image-left {
content: url(https://s16.postimg.org/qm1wc2syd/alexandru_stavrica_166342.png);
height: 250px;
float: left;
padding-left: 10%;
}
.image-centre {
content: url(https://s23.postimg.org/57nxodezv/jorg_angeli_128760.png);
height: 250px;
margin-left: auto;
margin-right: auto;
}
.image-right {
content: url(https://s3.postimg.org/ejuuxd6n7/jay_wennington_2250_min.png);
height: 250px;
float: right;
padding-right: 10%;
}
<div class="wrap">
<div class="image-left"></div>
<div class="image-centre"></div>
<div class="image-right"></div>
</div>
There's probably a better way to do this, but here's one that works: https://jsfiddle.net/5ybLh6vy/
<div class="wrap">
<div class="image-left">
<img src="https://s16.postimg.org/qm1wc2syd/alexandru_stavrica_166342.png">
</div>
<div class="image-centre">
<img src="https://s23.postimg.org/57nxodezv/jorg_angeli_128760.png">
</div>
<div class="image-right">
<img src="https://s3.postimg.org/ejuuxd6n7/jay_wennington_2250_min.png">
</div>
</div>
.wrap {
width: 100%;
display: table;
}
.wrap img {
box-sizing: border-box;
width: 100%;
padding: 5px;
}
.image-left, .image-centre, .image-right {
display: table-cell;
width: 33%;
}
How about using the image tag and wrapping them around a div like this?
.wrap {
width: 100%;
}
.image-wrapper{
width: 33%;
display: inline-block;
text-align: center;
}
.image-wrapper>img{
height:250px;
}
<div class="wrap">
<div class="image-wrapper">
<img src='https://s16.postimg.org/qm1wc2syd/alexandru_stavrica_166342.png'>
</div>
<div class="image-wrapper">
<img src='https://s23.postimg.org/57nxodezv/jorg_angeli_128760.png'>
</div>
<div class="image-wrapper">
<img src='https://s3.postimg.org/ejuuxd6n7/jay_wennington_2250_min.png'>
</div>
</div>
Float all three of the divs right, make them width: 33.33% and box-sizing: border-box.
This will make three evenly spaced images floated inline.
If you want them all in a neat row you'll have to add float:left; to all of them and or to the .wrap class but you would have to add display:inline; to each image which I think is the best solution. Problem is if the the viewport isn't wide enough it will push to the next line.
.wrap {
width: 100%;
float: left;
}
.image-left {
content:url(https://s16.postimg.org/qm1wc2syd/alexandru_stavrica_166342.png);
height: auto;
max-width: 25%;
padding-left: 10%;
display:inline;
}
.image-centre {
content: url(https://s23.postimg.org/57nxodezv/jorg_angeli_128760.png);
max-width: 25%;
height:auto;
display:inline;
}
.image-right {
content:url(https://s3.postimg.org/ejuuxd6n7/jay_wennington_2250_min.png);
height: auto;
max-width: 25%;
display:inline;
padding-right: 10%;
}
<div class="wrap">
<div class="image-left"></div>
<div class="image-centre"></div>
<div class="image-right"></div>
</div>
You could assign float: left; for all of your images, and then set correct margins.
.row {
width: 100%;
height: 150px;
}
.col {
display: inline-block;
margin: 0 auto;
height: 150px;
}
#left {
float: left;
width: 30%;
height: 150px;
background-color: red;
}
#center {
width: 40%;
height: 100%;
background-color: green;
}
#right {
float: right;
width: 30%;
background-color: blue;
}
<header>
<div class="row">
<div class="col" id="left">
Test Test Text
</div>
<div class="col" id="center">
Image
</div>
<div class="col" id="right">
Text Image
</div>
</div>
</header>
I have read so many posts but still cannot make this work. I am missing something. I want to have these three divs in my header. The center div should be centered in the middle of the page and it will be a image. The other divs will be on the left and right and a combination of text and images as desired. I want all 3 divs to have their content vertically and horizontally centered. How do I do this and maintain some responsiveness for users on div browser and screen sizes. Responsiveness is secondary issue, getting the content aligned is the main challange. Thanks,
You can use display: table for row and display: table-cell for columns
.row {
width: 100%;
height: 150px;
display: table;
}
.col {
width: 30%;
height: 150px;
display: table-cell;
text-align: center;
vertical-align: middle;
}
#left {
background-color: red;
}
#center {
width: 40%;
background-color: green;
}
#right {
background-color: blue;
}
<header>
<div class="row">
<div class="col" id="left">
Test Test Text
</div>
<div class="col" id="center">
Image
</div>
<div class="col" id="right">
Text Image
</div>
</div>
</header>
You could use CSS3 flexbox for it:
.row, .col {
display: flex;
justify-content: center;
align-items: center;
}
.col {
height: 200px;
flex: 1 100%;
}
#left {
background-color: red;
}
#center {
background-color: green;
}
#right {
background-color: blue;
}
<header>
<div class="row">
<div class="col" id="left">
Test Test Text
</div>
<div class="col" id="center">
Image
</div>
<div class="col" id="right">
Text Image
</div>
</div>
</header>
JSFiddle
The input element seems to drag down the parent div. Why is this happening? How can I fix it?
The html
<div class="main">
<div class="one">
</div>
<div class="two">
<input type="text" /> <!-- Without this input, the page looks fine -->
</div>
<div class="three">
</div>
</div>
The css
.main>div {
display: inline-block;
height: 330px;
}
.one {
width: 18%;
background-color: #fbfbfb;
}
.two {
margin-left:10px;
width: 50%;
border: 2px solid #ddd;
}
.three {
margin-left: 10px;
width: 20%;
background-color: #bbb;
border: 5px dashed #ddd;
}
Here is the effect: http://jsbin.com/gubozapove/edit?output
It is because you have given: display: inline-block;. To work around this, give:
vertical-align: top;
Preview
Reason: Inline Block elements tend to align to the baseline by default.
Fiddle: http://jsbin.com/kitazeweqi/1/edit?output
Add
vertical-align: text-top;
to your .main>div.
You can fix it adding float: left; to .one and .two
I'm trying to vertically center elements within a div, so per http://www.w3.org/Style/Examples/007/center.en.html, I set a min-height, vertical-align: middle and display: table-cell, but the text inside my div is still top-aligned.
<div id="fancybox-title-div" style="border: 1px solid black; min-height: 40px; display: table-cell; vertical-align: middle; width:50%; text-align: center; ">
<div style="height: 50px; float: left; width: 25px; background-color: blue"></div>
<div style="width: 70%">
<span>text</span><br><a href="'+link+'" >view comments</a>
</div>
</div>
Here's a jsFiddle for a visual:
http://jsfiddle.net/ccross59/gARYk/15/
What am I doing wrong?
My understanding and the way it has always worked for me is that display: table-cell has to be inside another element (like a div) with display: table.
Example:
http://jsfiddle.net/495Rm/
Example code:
div#top{
display:table;
height:100px;
border:1px solid red;
}
div#top{
display:table-cell;
vertical-align:middle;
}
Here's the solution from my comment: http://jsfiddle.net/thirtydot/gARYk/26/
HTML:
<div id="fancybox-title-div">
<div class="left"></div>
<div class="right">
<span>text</span><br /><a href="'+link+'" >view comments</a>
</div>
</div>
CSS:
#fancybox-title-div {
border: 1px solid black;
min-height: 40px;
width: 50%;
margin-left: auto;
margin-right: auto;
}
#fancybox-title-div .left {
display: inline-block;
vertical-align: middle;
height: 50px;
width: 25px;
background-color: blue;
}
#fancybox-title-div .right {
display: inline-block;
vertical-align: middle;
width: 70%;
border: 1px solid red;
}
If it matters, as it is this won't work in IE7. Here's a fixed version: http://jsfiddle.net/gARYk/27/
jsfiddle.net/gARYk/10 .... This is what you are looking for.