Why is this not working?
I have this:
<div class="center">
<div class="line">
text
</div>
<div class="line">
text2
</div>
<div class="line">
text3
</div>
</div>
in css:
.line {
display: inline-Block;
width: 150px;
}
.center {
margin: 0 auto;
}
Why isn't .center css working? I want it to be in center of my screen but it puts it on left corner.
It's because your center div takes up the full width of the page. The line divs are aligned to the left of the center div. If you specify a width for the center div, it will appear in the center of the page. I made an example for you:
http://jsfiddle.net/LGuAq/
If you remove the width: 470px; line, you'll see what's going on. I added a black div border just to show where each div is and how big it is.
Change .center to this:
.center {
text-align: center;
}
JSFiddle
Give .center a width, or it assumes 100% and there is no margin to be had:
.center {
margin: 0 auto;
width: 50%;
}
Why don´t you try this:
.line {
text-align:center;
display: inline-Block;
width: 150px;
}
.center{
display: inline-block;
}
Related
I have these 3 div's. they are set to display inline-block in a wrapper with a width of 1000px. each div is 330px. I have some issues getting them to line up but i dont want to use float left.
How do i display them inline block?
image of my issue
All you need to do is add vertical-align to your elements. The value depends on how you want the elements to align, but you're probably looking for vertical-align: top.
Without vertical-align:
body {
width: 1000px;
}
div {
background: red;
width: 330px;
height: 100px;
display: inline-block;
}
<div>ASDASD</div>
<div>ASD</div>
<div></div>
With vertical-align:
body {
width: 1000px;
}
div {
background: red;
width: 330px;
height: 100px;
display: inline-block;
vertical-align: top;
}
<div>ASDASD</div>
<div>ASD</div>
<div></div>
Hope this helps! :)
Can you share a fiddle with your code, otherwise this seems to work
<div style="width:1000px;background:#aaa">
<div style="width:330px;display:inline-block;background:#f00">
a
</div>
<div style="width:330px;display:inline-block;background:#0f0">
b
</div>
<div style="width:330px;display:inline-block;background:#00f">
c
</div>
</div>
See https://jsfiddle.net/ptornhult/xoqLgtq1/
they should automatically line up if they have space. There is something else pushing it down, see below as long as you have width they should auto line up.
.wrapper {
width: 1060px;
border: 10px solid green;
}
.inline {
border: 10px solid red;
height: 500px;
width: 330px;
display: inline-block;
}
borders have a impact on size as well so you need to have the wrapper fit borders as well (hence why my wrapper is slightly larger).
https://codepen.io/Zuriel/pen/VMmdbw
Here is a JSFiddle trying to replicate your issue.
https://jsfiddle.net/4pvebp05/
It may be that you have not set your container to be display: block?
In that case, try vertical-align: middle
We can do two different ways
Display inline-block.
<div class="inline">
<div>
First
</div>
<div>
Second
</div>
<div>
Third
</div>
</div>
CSS
.inline{
width:1000px;
}
.inline div{
display:inline-block;
width:330px;
}
https://jsfiddle.net/md25je2g/
Display flex divide three equal column
<div class="flex">
<div>
First
</div>
<div>
Second
</div>
<div>
Third
</div>
</div>
CSS
.flex{
display:flex;
width:1000px;
}
.flex div{
flex:1;
border:1px solid red;
}
https://jsfiddle.net/mL3eqvoe/
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.
i just cant make those left right fixed divs responsive. 3 divs : |fixed| |normal| |fixed|
those 3 divs are in one div.
if im going on full scale window they are working perfectly, but as i down size the window it's screws the all thing up.
i dont know how to fix that- my center div working perfectly- responsive and centered.
but the left and right fixed just wont be responsive as well.
i guess the solution is connected to responsive width of the fixed divs.. any ideas?
i added JSFIDDLE example for your convenient :
this is the structure :
<div>
<div **fixed** left> <img> </div>
<div **normal** center> 2 divs for left and right inside the center div </div>
<div **fixed** right> </div>
</div>
REAL html :
<div id="div_header">
<div class="cloumn right" id="div_right"><img src="http://placehold.it/250x600"></div>
<div class="cloumn center" id="div_center">
<div id="inside_center">
<div class="left_side" id="left_inside_center">
</div>
<div class="right_side" id="right_inside_center">
<h1> headline </h1>
<img src="http://img-9gag-lol.9cache.com/photo/a7KwPAr_460s.jpg">
</div>
</div>
</div>
<div class="cloumn left" id="div_left"><img src="http://placehold.it/250x600"></div>
</div>
</div>
REAL CSS:
body {
margin-top: 0 !important;
direction: rtl;
}
#right_inside_center img {
width: 97%;
margin-top: 7px;
}
#left_inside_center {
float:left;
width:inherit;
}
#right_inside_center {
float:right;
width:65%;
}
#inside_center {
height: auto;
overflow: hidden;
}
#div_header {
text-align: center;
display: table;
width: 100%;
table-layout: fixed;
}
.cloumn {
display: table-cell;
}
.center {
background:green;
height: 1500px;
width: 60%;
}
.left {
position: fixed;
width: 18%;
}
.right {
position: fixed;
width: 18%;
}
setting the width of the images to 100% will fit the images in the parent and made some minor changes to width of left and right
JS Fiddle
Hi barry you can use bootstrap css frame work...
http://www.getbootstrap.com
It's very easy to use...
if you need more detail about bootstrap go to the official website.
How do i push my content down once i do (ctrl + mouse scroll) to zoom in , and the content center it self right away.
So i have #div left #div right both beside each other, and once it zooms, #div left will push down #div right ,and #div right will center it self right away.
Here is my jsfiddle sorry please copy and paste http://jsfiddle.net/Tedeee/bBpEm/
HTML
<div id="top">
<br />
hi
</div>
<div id="outer">
<div id="right">right</div>
<div id="left">left</div>
</div>
CSS
div {
outline: red 1px solid
}
#right {
width: 200px;
height: 200px;
float:left;
background-color:red;
}
#left {
width: 200px;
height: 200px;
float:left;
background-color:grey;
}
#outer {
float:left;
clear:both;
text-align: center;
}
Sample website
Try look at the home-section https://coderwall.com/welcome
As you can see once my div got pushed down the # right div wont move to center.
and also i need to center it once it is pushed down.
How do i do this, i really need help. Thanks.
Try displaying your divs as inline-block.
Updated JSFiddle
This comes with some caveats. inline-block elements will have whitespace surrounding them, and there are fixes for that. My preferred method is to add margin-right: -0.36em; to the inline-block elements. There are other fixes you can look up too.
Basic structure is as follows:
HTML
<div id="top"> <br />hi</div>
<div id="outer">
<div id="right">right</div>
<div id="left">left</div>
</div>
CSS
div { outline: red 1px solid }
#outer {
text-align: center;
}
#right {
width: 200px;
height: 200px;
display: inline-block;
background-color: red;
}
#left {
width: 200px;
height: 200px;
display: inline-block;
background-color:grey;
}
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/