How to align the second div(display_bar) to the center
<div id="display" style="display:inline;font-size:150%;" > </div>
<div name="display_bar" id="display_bar"
style="margin-left: auto;margin-right: auto;width:125em;text-align:center;visibility=visible;display:inline;">
<img class="view_prev" src="first.png">
<img class="view_prev" src="2.png" >
<img class="view_prev" src="3.png" >
<img class="view_prev" src="4.png" >
<img class="view_prev" src="5.png" >
</div>
Also the second div should be inline with the first div
Thanks.
Since it is display: inline, set text-align: center on its parent element and ask yourself if it should be a span instead of a div.
(NB: CSS uses :, not = and the alt attribute is mandatory for img elements)
Try this css:
#display_bar
{
margin:0 auto;
width:300px; /* or whatever width */
}
You can also center an element with display: inline-block or display: inline by using text-align: center on the parent element. This will center the text inside as well. I think this may be what you want, since you said you wanted to align everything to the center. Just put it all into the div.
For example:
<div class="wraper">
<div class="inwrap">
Lorem ipsum dolor text...
</div>
</div>
CSS:
.wraper {
}
.inwrap {
width: 50%;
margin: 0 auto;
}
OR:
.wraper {
text-align: center;
}
.inwrap {
display: inline-block; /*or inline*/
width: 50%;
}
Related
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.
Can't get my head around on why <img> inside <div style="display: inline-block"> pushes that div lower from top?
HTML
<div id="wrapper">
<div id="a1">
<img src='...' alt=""/>
</div>
<div id="a2">
</div>
<div id="a3">
</div>
<div id="a4">
</div>
<div id="a5">
</div>
<div id="a6">
</div>
<div id="a7">
</div>
<div id="a8">
</div>
</div>
CSS
div > div {
background: red;
height: 200px;
width: 19%;
text-align: center;
margin: 0 5% 5% 0;
display: inline-block;
}
img {
height: 128px;
width: 128px;
display: /* "BLOCK" FIXES THE ISSUE */;
}
EDIT
Setting img to display: block fixes the issue. But could anyone explain me why there is such a behaviour without that display: block?
The default vertical-align value is baseline, it can be the bottom line of the text or the bottom line of an image (img element is a replaced element, inline* level), which causes the offset in the first row of your demo.
In order to fix it, you can set vertical-align to top, or like you said set img to display: block also works.
The img tag behaves like a inline and bock element, basead on this answer: Is <img> element block level or inline level?
That's why you have to display block on the img inside a div with inline-block.
You can fix this by either adding a float: left or vertical-align:top
https://jsfiddle.net/foxhh0av/
div > div {
background: red;
height: 200px;
width: 19%;
text-align: center;
margin: 0 5% 5% 0;
display: inline-block;
float: left;
}
img {
height: 128px;
width: 128px;
display: /* "BLOCK" FIXES THE ISSUE */;
}
<div id="wrapper">
<div id="a1">
<img src='http://dfsm9194vna0o.cloudfront.net/1471693-0-Washingmachineforlaundry128.png' alt=""/>
</div>
<div id="a2">
</div>
<div id="a3">
</div>
<div id="a4">
</div>
<div id="a5">
</div>
<div id="a6">
</div>
<div id="a7">
</div>
<div id="a8">
</div>
</div>
Just change this in your css:
img {
height: 128px;
width: 128px;
display: block;
}
That should fix it.
You could set vertical-align: top; to your child divs (div > div).
I am trying to align vertical some text in a div here:
HTML:
<div class="div1">
<div class="div11">
<img src="https://pbs.twimg.com/media/BrJSq87IMAAD3Zg.png" alt="" width="40px">
</div>
<div class="div12">
yo
</br>
yo
</div>
</div>
CSS:
.div1 {
height: 40px;
}
.div1 div {
display: inline-block;
}
.div12 {
padding-top: 5px;
}
JSFiddle:
http://jsfiddle.net/4mVPG/1/
The height of my divs is fixed so all I want to do is set up a padding-top on the last div (.div12) to move the text down a bit. However when I add a padding-top all the box are brought down.
Why is this happening and how can I fix this? Thanks
When you use inline-block, each block acts as if it where text that gets alined (by default) on the baseline. If you increase the height of the second block, the baseline goes down, and the first block as well.
You can use vertical-align: top to change this.
Just replace CSS with this:
.div1 {
height: 40px;
}
.div1 > div {
float: left;
}
.div12 {
padding: 0 0 0 3px;
}
The div1 div selector also applies to all descendants so using > only applies to first one. Also if container is height fixed i think it's better to use float.
JSFidle
Hope it helps!
You can use ".div1 div {display: inline-block;vertical-align: top;}" and there is no need for .div12 { margin-top: 30px; } since you want both aligned top and no extra space on top of "Text div"
Also, just for a better practice, avoid using "<br>" tag, there are many "Block" tag like, <div>, <p> etc. and if there are list of "links" use "<ul><li>" and you can control the margins and spaces with CSS.
Here is the updated code :
HTML
<div class="div1">
<div class="div11">
<img src="https://pbs.twimg.com/media/BrJSq87IMAAD3Zg.png" alt="" width="40px"/>
</div>
<div class="div12">
<ul>
<li>yo
</li>
<li> yo
</li>
</ul>
</div>
</div>
CSS
.div1 {
height: 40px;
}
.div1 div {
display: inline-block;
vertical-align: top;
}
.div12 ul,
.div12 li{
margin:0;
padding:0;
list-style:none;
}
Working Fiddle for the same: http://jsfiddle.net/PK3UU/
Hope this is helpful!!!
Is it what you want ? http://jsfiddle.net/4mVPG/4/ i cleaned up css a little bit
div {
height: 40px;
display: inline-block;
vertical-align:middle;
}
and for html
<div class="div11">
<img src="http://placekitten.com/40/40" alt="" width="40px" />
</div>
<div class="div12">
yo
<br />
yo
</div>
I have tried using float left/right, which puts them next to each other but I want them to be evenly spaced from left to right. I tried using padding/margin tags, but they don't work either. Any help would be appreciated!
Code:
<div class="options">
<ul style="list-style:none;">
<li>
<img src="magger.jpg" width="180" height="180"/><br> Do Stuff To His Dog
</li>
<p>
<li>
<img src="me.jpg" width="180" height="180"> <br>Examine His Checkered Past</p>
</li>
<p>
<li>
<img src="wife.jpg" width=180 height=180><br>Sexually Harass His Wife</p>
</li>
</ul>
CSS:
.options li {
float:right;
}
You're over complicating it:
HTML:
<div class="images">
<img src="1.jpg"/>
<img src="2.jpg"/>
<img src="3.jpg"/>
</div>
CSS:
.images {
text-align : center;
}
.images img {
width : 75px;
height : 75x;
margin : 10px;
}
Demo: http://jsfiddle.net/6VrJR/
add this to your css-code:
ul{
width : 550px;
margin: auto;
}
here is a jsfiddle as well
Define width and auto margin for the UL. Also, give margin and text-align center for the text.
.options ul {
width:564px;
margin:auto;
padding:0;
}
.options li {
float:right;
text-align:center;
margin:0 4px;
}
Here is the jsfiddle: http://jsfiddle.net/EASFG/
Do not use floats:
Instead of using floats for your children elements, let them flow inside an anchor tag. Anchor tags have inline as default display behavior (add display: inline; if you need to use another tag instead).
The trick that centers the links is the container text-align: center; property.
This can be translated in code as follows:
Define your container class
.container {
width: 100%;
text-align: center;
display: block;
margin: auto;
}
Create your HTML structure:
<div class='container'>
<img src="http://www.bradfordcityfc.co.uk/images/common/bg_player_profile_default_big.png" alt="">
<img src="http://www.bradfordcityfc.co.uk/images/common/bg_player_profile_default_big.png" alt="">
<img src="http://www.bradfordcityfc.co.uk/images/common/bg_player_profile_default_big.png" alt="">
</div>
Demo: http://codepen.io/manuelro/pen/Abgox
Regards,
M
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