I am trying to display an image next to two lines of text, which are centered. I have attached an example, and you will see from it that the image is to the left of the text, whereas I am trying to center the image to be on the left side of the text, and have a perfectly centered image/text.
CSS:
.center-class{
text-align:center;
}
.righty img{
max-width: 100px;
float:left;
}
.vid-open{
}
HMTL:
<section class="">
<div class="row pull-down">
<div class="center-class">
<div class="righty">
<img src="http://www.psdgraphics.com/file/white-egg.jpg" >
<h2>This is a header.</h2>
<h5 class="vid-open">some text some text some text<span class="icon-right-left-01-011" ></span></h5>
</div>
</div>
</div>
</section>
SEE DEMO
Simply wrap the text in a div and display it inline-block:
.center-class {
text-align: center;
}
.righty > * {
display: inline-block;
vertical-align: middle;
}
.righty img {
max-width: 100px;
}
<section class="power-of-egg">
<div class="row pull-down">
<div class="center-class">
<div class="righty">
<img src="http://www.psdgraphics.com/file/white-egg.jpg">
<div class="con">
<h2>This is an egg.</h2>
<h5 class="vid-open">eggs are very nutritious<span class="icon-right-left-01-011" ></span></h5>
</div>
</div>
</div>
</div>
</section>
Updated Codepen
Well, this will center the entire block:
.center-class{
text-align:center;
}
.righty img{
max-width: 100px;
float:left;
}
.vid-open{
}
.righty {
width: 300px;
margin: 0 auto;
}
The problem is that you've got your image inside of a div and div is a block-level element, which means it will expand to be the full width of its parent element.
If you take the image out of the div and make the div that contains the text have:
display:inline-block;
That div will shrink down to be only as wide as its content.
Here's your updated code: http://codepen.io/anon/pen/LNNJRQ
To horizontally center an element you can use display: block; and margin: auto;. There may be a better approach but this is the css I used to have the image in the center and the text to the right of it:
.righty > .con {
position: absolute;
top:0;
left: 55%;
}
.righty img {
display: block;
vertical-align: middle;
margin: auto;
max-width: 100px;
}
Note: the position of the class .con will vary based on screen size.
Here is the updated codepen.
Related
I want to horizontal align a div that consists of two other divs:
One from the left, that will contain an image.
Other from the right, that div will contain text, aligned to the left.
The alignment will be relative to a container, and the centered div should expand to a maximum width (and not take the entire container's width).
This pen describes what i tried to do using table layout
This is the HTML
<div class="container">
<div class="centered">
<div class="left">
left text
</div>
<div class="right">
very very very long right text
</div>
</div>
</diV>
And the CSS
.container {
width: 200px;
background-color: red;
}
.centered {
display: table;
margin: 0 auto;
max-width: 100px;
}
.left {
background-color: green;
display: table-cell;
vertical-align: middle;
}
.right {
background-color: blue;
display: table-cell;
vertical-align: middle;
}
As you can see, the space on the right of the blue area is part of the centered div (the green+blue area), but it makes the div's content not to be centered. What i would like is the blue area to take the width of the longest line in it
If you're wanting the blue area to dynamically grow with the text inside of it while retaining a centered area of content would the following be what you're looking for?
.container {
width: 200px;
background-color: red;
padding:0 20px;
}
.centered {
display: table;
margin: 0 auto;
max-width: 100px;
}
.left {
background-color: green;
display: table-cell;
vertical-align: middle;
color:#fff;
}
.right {
background-color: blue;
display: block;
vertical-align: middle;
width:inherit;
color:#fff;
}
<div class="container">
<div class="centered">
<div class="left">
left text
</div>
<div class="right">
very very very long right text very very very long right textvery very very long right textvery very very long right textvery very very long right textvery very very long right text
</div>
</div>
</div>
I have several fluid images that I want to float and stack up next to each other. For example I have the img-div width set to 50% which stacks two images in each row. The images also increase in size depending on browser size. At the same time I want to be able to put a text over the middle of each image that floats around and stays in the center of the images. My problem is the text not centering. When I set img as absolute it centers but the stacking gets messed up.
Any idea how I can do this via CSS only?
Here's my HTML code:
<div id="container">
<!-- image1 -->
<div class="img-div">
<a href="#">
<img src="images/image1.jpg" />
<div class="txt-div">
<p>Some text goes here!</p>
</div>
</a>
</div>
<!-- image2 -->
<div class="img-div">
<a href="#">
<img src="images/image2.jpg" />
<div class="txt-div">
<p>Another text.</p>
</div>
</a>
</div>
<!-- image3 -->
<div class="img-div">
<a href="#">
<img src="images/image3.jpg" />
<div class="txt-div">
<p>Some more text.</p>
</div>
</a>
</div>
<!-- image4 -->
<div class="img-div">
<a href="#">
<img src="images/image4.jpg" />
<div class="txt-div">
<p>Last text.</p>
</div>
</a>
</div>
</div>
Here's my CSS:
.img-div {
width: 50%;
float:left;
a {
position: relative;
display: block;
height: 100%;
font-size: 0;
text-align: center;
}
a:before {
vertical-align: middle;
content: '';
display: inline-block;
height: 100%;
width: 0;
}
.txt-div {
vertical-align: middle;
position: relative;
z-index: 10;
display: inline-block;
font-size: medium;
p {
padding: 0;
margin:0;
}
}
img {
position: absolute;
width: 100%;
z-index: 9;
top: 0;
left: 0;
}
}
You almost had it :)
use position:relative/ absolute to draw your text-container over the image, and within use the pseudo :before and vertical-align technique to center your <p>.
.img-div {
width: 50%;
display:inline-block;
position: relative;
}
.img-div img {
width:100%;
}
a {
text-align: center;
}
.txt-div {
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
z-index:1;
}
.txt-div:before {
content:'';
padding-top:100%;
vertical-align:middle;
display:inline-block;
}
.txt-div p {
max-width:95%;
display:inline-block;
vertical-align:middle;
}
DEMO: http://codepen.io/gc-nomade/full/Cxkqf
remove the div around the p and set position:absolute; to the p set the img to position:relative; the p will now go over the img, if I'm correct. set text-align:center; to p to get it centered. (sometimes it might be good to width:100%; the p too)
You could use CSS background images to place each image in a dynamically sized div, then simply float the divs and they will fill in whatever space without altering position of the block level elements. In this case each div would get a unique id according to the image it would contain and the urls for your images would be a background image for the div. The only drawback to this that I can see is that if images were disabled you would not get alt text, but your divs would remain the specified size. and in their correct position.
I have the following HTML:
<div class="section-cover dark-cyan" ng-style="{height: getCoverHeight()}">
<div class="container">
<h1 class="intro">Some intro text.</h1>
</div>
<div class="arrow-holder" ng-click="scrollTo('video-container');">
<span class="arrow"></span>
</div>
</div>
The .section-cover div changes height dynamically based on viewport size whenever the browser is resized. I need to align the <h1> element vertically inside the section-cover div. So far I've achieved that using display: table-cell however now I can't get the width to stick at 100%. Here's a JSFiddle example:
http://jsfiddle.net/AvrrM/
How can I modify this to vertically align the <h1> and keep the width at 100%?
Maybe something like this?
http://jsfiddle.net/AvrrM/1/
.section-cover {
position: relative;
display: table;
vertical-align: middle;
width: 100%;
}
.container{
display: table-cell;
background: red;
text-align: center;
vertical-align: middle;
}
Why is itsn't working?? because table-cell is similar to html table, you need to provide a container which is table type before you can make the table-cell occupy the full width!!
working fiddle
add this CSS in your markup :
html, body {
width: 100%;
height:100%;
margin:0;
padding:0;
}
#table {
width: 100%;
display:table;
text-align:center;
}
HTML
<div id="table">
<div class="section-cover dark-cyan" style="background: blue; color: white; height: 200px">
<!-- all inner html here -->
</div>
</div>
I am trying to align a small image (logo) next to a heading on my page, and I want these two items to be centered (ideally, the heading would be centered, and the image would be to next to the heading). However, no matter what I try, I can't seem to make it work. Here's a sample:
<h2>Headline</h2>
<img src="logo.jpg">
Now, I have tried a couple of things here. I have tried giving the h2 a div with an id, and the image a div with another id - then giving them set widths and floating them. This at least puts them on the same line, but not in a way I want to.
I also tried to wrap those divs inside another div, like so:
#container {
width: 800px;
margin: 0 auto;
}
#h2div {
width: 40%;
float: left;
}
#imgdiv {
width: 10%;
float: left;
}
That only seems to divide the page so that the header gets 40% starting from the left, and the image gets 10% after that. I tried experimenting with z-index: -1 on the image, and if I then use text-align: center, I can center the headling. But then I have to give the picture a position:absolute or relative, which doesn't work well if the user zooms in or out..
How do I solve this? How do I get either the headline centered, and the image to display right next to it (sort of anchored to the "end" of the headline), or have the two share the center?
how about something like this:
<div id="container">
<h2>Headline</h2>
<img src="logo.jpg">
</div>
#container {
width: 800px;
margin: 0 auto;
text-align: center;
}
#container h2, #container img {
display: inline;
}
and jsfiddle - http://jsfiddle.net/Ygz4t/
img is inline element, so you should assign text-align:center; to the parent block element. Assuming you have such markup:
<div id="imgdiv">
<img src="logo.jpg">
</div>
your CSS could be like following:
#imgdiv {
text-align: center;
}
1) Wrap the h2 and img within a div (lets call it as container) and make display: inline-block to show h2 and img in same line
2) Then using text-align: center
HTML:
<div id="container">
<h2 style="display: inline-block">Headline</h2>
<img src="logo.jpg" />
</div>
CSS:
body {
width:1000px;
height: 2000px;
background: #ccc;
}
#container {
text-align: center;
width: inherit;
}
h2, img {
display: inline-block;
}
JSFiddle
HTML:
<div>
<h2>Headline</h2>
<img src="http://farm4.staticflickr.com/3694/10183642403_0c26d59769_s.jpg" />
</div>
CSS:
h2, img {
display:inline;
}
h2 {
margin: 0;
line-height: 100%;
}
img {
vertical-align: middle;
}
DEMO
I think you are trying this,
HTML
<div class="out">
<div class="inline">
<h2>TEST</h2>
</div>
<div class="inline">
<img src='http://s15.postimg.org/p4qxel6hz/agent_Photo.jpg' alt="testImage"/>
</div>
</div>
CSS
.out {
width: 800px;
margin: 0 auto;
}
.inline {
display:inline-block;
}
Updated JSFIDDLE
try this
<div id="center">
<h2>Headline</h2>
<img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcSR613FD45Dsf0nk_cJwlvpAUKsBM6JeOmNjAatjKKBHz_GFXt7rrvslw" alt="not found" />
</div>
Demo Fidle
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/