Basically I want the text to always be centered in the middle. With one image on either side that resize depending on how large the page is to take up all the white space. This is what I have so far.
<div style="text-align:center;">
<img style="float: left; width: 33%; margin:20px 0 0 0;" src="img/pulse.gif"/>
<img style="float: right; width: 33%; margin:20px 0 0 0;" src="img/pulseR.gif"/>
<h1 style="display:inline; vertical-align: middle; text-align: center; width: 33%;">Safety</h1>
</div>
I would like to remove the width: 33% and for the images to resize to fit the space. Keep in mind it needs to be forced to stay on one line.
Thanks
You can use table and table-cell for display, or just classic html table.
There is example using table and table-cell for display (there is added extra divs for images and header) :
.container
{
width:100%;
display:table;
margin-top:20px;
}
.container div
{
display:table-cell;
text-align:center;
vertical-align:top;
}
.container img
{
width:100%;
height:100%;
}
<div class="container">
<div><img src="http://placehold.it/350x350"/></div>
<div><h1>Safety</h1></div>
<div><img src="http://placehold.it/350x350"/></div>
</div>
You can wrap images inside div containers like this:
<div style="text-align:center;">
<div class="left"> <img src="img/pulse.gif"/></div>
<h1>Safety</h1>
<div class="right">
<img src="src="img/pulseR.gif"/></div>
https://jsfiddle.net/uv85304v/
Related
So I'm trying to align some images side by side without have gaps vertically.
Each image width is 20% of the page (5 per a row), and the height varies between the images.
Is there any way of aligning them vertically as well (so that each image is directly below the one above it without a gap, as because of the random heights, all images on a row start where the photo with the largest height above ends)?
css for the photo
.photo {width:20%; height:auto;
margin: 0;
padding: 0;
float:left;
}
the photo
<img src="" alt="image" style="max-width:100%; max-height:100%;" class="photo">
you can emulate table, and for cell set vertical-align:middle;
<div class="table">
<div class="cell">
<img src="" alt="image" class="photo">
</div>
...
</div>
and css for it
.table{
display: table;
}
.cell {
display: table-cell;
vertical-align: middle;
}
.photo{
max-width: 100%;
max-height: 100%
}
example https://jsfiddle.net/nardist01/2f7yd20e/2/
you see the example here
.photo {
width:20%;
height:auto;
margin: 0;
padding: 0;
float:left;
}
I've two divs. It contains two chart with width 800px and height 400px each. I want them horizontally aligned.
Also, they shouldn't change there alignment or image size if monitor/browser size changes. Automatic horizontal scroll bar (or vertical if required) should come.
I've tried many options but couldn't get what I am looking for. :(
<style type="text/css">
#container{
font-size: 28px;
width:100%;
height:100%;
text-align: center;
}
#left{
display:inline-block;
width:50%;
margin:0;
}
#right{
display:inline-block;
width:50%;
text-wrap:none;
}
This is the latest version of CSS I tried.
From what I understand, this should satisfy what you're looking for. Here's a working example in JSFiddle. I've added notes to the CSS to describe how I got it to work.
#container{
/* Since you know the width of the images, we can set
the container width. This will force the browser to
draw a horizontal scrollbar when the width is too small */
width: 1600px;
/* This is a little trick to make the container as large
as the elements inside it, even though they are set to
float: left */
overflow: hidden;
}
#left,
#right{
/* display: inline-block does not work because is adds space
around each element, making them wider than the container and
forcing the second image down below the first, so we can use
float: left instead */
float: left;
width: 50%;
}
<div id="container">
<div id="left"><img src="http://placehold.it/800x400" /></div>
<div id="right"><img src="http://placehold.it/800x400/444444" /></div>
</div>
display:flex and margin will do the trick here. And remove width:50%; if do not want to change image size.
Check following: Here i change image size to display properly.
#container {
display: flex;
font-size: 28px;
height: 100%;
text-align: center;
width: 100%;
}
#container > div {
margin: 0 5px;
}
img{
width:400px;
height:200px;
}
<div id="container">
<div id="left"><img src="http://placehold.it/100x100" /></div>
<div id="right"><img src="http://placehold.it/100x100" /></div>
</div>
Working Fiddle
Display inline-block will work, here is an example: https://jsfiddle.net/w913sbro/
You can also try adding this to your #container:
display:flex;
as by default flex will align in row style.(horizontal).
Would be great if you could show us what you have tried. Anyways I hope this is what you are expecting. demo here
<div class="row">
<div class="container">
<div id="1" class="box left">
<img src="http://placehold.it/100x100" height="800" width="400">
</div>
<div id="1" class="box right">
<img src="http://placehold.it/100x100" height="800" width="400">
</div>
</div>
</div>
i want to place Text on an img (centered vertically and horizontally).
I have tried a lot of stuff. The problem is the img and the text can change. Also the img have to be floated next to each other.
Here is an example:
http://jsfiddle.net/h5az77hd/1/
<div id="div0">
<div class="div1">
<div class="div2">
<div class="div3">Start</div>
<img src="http://fs2.directupload.net/images/150222/w4d322gc.png" style="display:block;" width="auto" height="150">
</div>
</div>
<div class="div1">
<div class="div2">
<div class="div3">Testtext</div>
<img src="http://fs2.directupload.net/images/150222/w4d322gc.png" style="display:block;" width="auto" height="150">
</div>
</div>
</div>
.div1 {
display:inline-block;
vertical-align:middle;
}
.div2 {
float: left;
background:#2E2EFE;
}
.div3{
display: inline-block;
position:absolute;
}
I cant use margin/width/height/... settings (bcs the text and img can change)
Are you guys having an idea?
Whenever I need to center things without knowing it's width / height I use a combination of display: table display: table-cell; vertical-align: middle; and text-align: center.
When you have a parent with display: table; and a children with display: table-cell; vertical-align: middle;, the children will be at the middle (vertically) of table, then, just use text-align: center; to center things horizontally.
In this case, you will need to adjust some things in your markup to make it works.
Here is a demo (using your image): http://jsfiddle.net/499nhjb0/1/
In your case, you can try to change .div3 to behaviour as .container-text-wrapper.
Hope it helps!
My question is about CSS and DIV tags. I have a dynamic page, and I would like one container DIV. There are two scenarios: in one case, this container DIV will just have one DIV in it, with a width of 50%, and should be centered. In the other case, there will be two DIVs in it, and they should be side by side, each taking up 50%.
I have tried float:center (using overflow: hidden on the container DIV), and that works for 1 DIV in it, but with two, they are stacked on top of each other. If I use float: left, then the 2 DIVS appear correct, but the single DIV is left aligned, not centered.
Any help on how to achieve this effectively would be greatly appreciated!
<div style="width:800; margin: 2px; background-color:blue">
<div style="width:50%; background-color:orange;">
Text
</div>
<div style="width:50%; background-color:red;">
Text
</div>
</div>
jsFiddle
For the two-div scenario:
<div style="width:800; margin: 2px; background-color:blue; display: table;">
<div style="background-color:orange; display: table-cell;">
Text
</div>
<div style="background-color:red; display: table-cell;">
Text
</div>
</div>
Now for the one-div scenario:
<div style="width:800; margin: 2px; background-color:blue; display: table;">
<div style="background-color:orange; display: table-cell;">
Text
</div>
</div>
In each case, the inner divs, whether there are 1 or 2, will take up a combined 100% of the outer div. Essentially, it acts like the <table> element without having the semantics of a <table>.
check this fiddle
HTML
<div class="wrapper">
<div class="divholder">
<div style="background-color:orange;">DIV 1</div>
<div style="background-color:red;">DIV 2</div>
</div>
</div>
CSS
.divholder div{
display:inline-block;
margin:auto;
width:49%;
}
.divholder {
text-align:center;
margin: 0 auto;
position:relative;
}
.wrapper{
width:100%;
background-color:blue;
}
This perfectly deals with your need..While there is only one div, the div gets centered and if two divs come then both will be equally divided and floated left.Please see the fiddle..
Similar to chharvey's answer, this can be achieved nicely with display: table;
In my example it is centered horizontally and will work with any number of columns as they will fit themselves to the full width of div.wrap. The columns are currently given a height of 100%, this can be adjusted.
Have a jsBin example!
HTML
<div class="wrap">
<div class="column">
</div>
<div class="column">
</div>
</div>
CSS
html,body {
height: 100%;
}
.wrap {
display: table;
width: 800px;
height: 100%;
margin: 0 auto;
}
.column {
display: table-cell;
background: #FF0;
}
.column:first-child {
background: #F00;
}
Although this question is asked before, my problem is little different. I have a div, within which I have two images. First image needs to be stayed left align, where as the second image needs to be center aligned. The div has no fixed width, so that it covers the heading. I have created a fiddle, which can be found here.
Any suggestion will be very helpful to me.
Case 1
Add text-align:center to the div class.
Give float:left to the first image by using pseudo class so that your second image will be center aligned to the div and first image will be left aligned.
Here is the demo http://jsfiddle.net/Eevpc/5/
Case 2
Do it by position:absolute
.brandLogo {
margin: 15px; background-color:red; text-align:center; position:relative;
}
a img:first-child {
border: 0 none; position: absolute; left:0;
height: auto;
vertical-align: middle;
}
img {
border: 0 none; margin:0 auto !important;
height: auto;
vertical-align: middle;
}
Demo http://jsfiddle.net/Eevpc/11/
In case 1, second image is center for the remaining width of the div (ignoring the space occupied by the first image).
In case 2, second image is aligned to the exact center of the original div width.
Hope this will work.
.div_class{
display: block;
margin-left: auto;
margin-right: auto;
}
Thanks
Try this:
<div id="main" style="text-align:center; width:100%;">
<div id="left" style="float:left;">
<img src="..." alt="..."/>
</div>
<div id="right" style="float:right; width:100%; text-align:center;">
<img src="..." alt="..." style="margin:0 auto;" />
</div>
<div style="clear:both; content:'.'; display:none" />
</div>