I can't get my block div's to center except my text on top and bottom. For some reason they are aligning only to the left.
I've tried margin:auto and setting the width 100%. I'm sure its probably an easy fix but I can't seem to find the error in my code.
Only thing that fixes it is adding a margin-left, however it doesn't look in all dimensions so would prefer if it naturally centered as it should.
http://jsfiddle.net/cV4UJ/
Some HTML please see JSfiddle instead:
<!-- Blocks -->
<div class="grid_24 center">
<div class="grid_7">
<div class="grey_boxes">
<p class="grey">
test
</p>
<p class="complete">
Complete
<img src="https://www.gstatic.com/gmktg/dub-img/newbie_be_icon_complete.png" class="complete" alt=" "/>
</p>
</div>
</div>
<div class="grid_1">
<p>
</p>
</div>
<div class="grid_7">
<div class="panel">
<div class="boxes card">
<p class="boxtext">
test
</p>
<p class="rotate">
<img src="https://www.gstatic.com/gmktg/dub-img/newbie_be_icon_rotate.png" class="rotate" alt=" "/>
</p>
</div>
<div class="boxesback card">
<p class="boxtext">
test
button
</p>
</div>
<div class="grid_7">
<div class="panel">
<div class="boxes card">
<p class="boxtext">
test
</p>
<p class="rotate">
<img src="https://www.gstatic.com/gmktg/dub-img/newbie_be_icon_rotate.png" class="rotate" alt=" "/>
</p>
</div>
<div class="boxesback card">
<p class="boxtext">
test
button
Any help would be much appreciated.
Thanks
http://jsfiddle.net/cV4UJ/2/
to make it work, you need to force the div.center to behave like a div (right now it has the properties of .grid_24 class, which is an inline left floated element)
.center {
margin: 0 auto !important;
float: none !important;
display: block !important;
width: 980px;
clear: both;
}
the most important properties needed for a centered div:
margin: 0 auto;
no float
be a block element (original display for a div)
have a width
i also put !important, to force it lose all the properties of grid_24
Related
I am currently teaching myself HTML / CSS. After some tutorials I am now building my first own project. I try to structure three images and three texts on my page using CSS.
The structure should look like this:
Text - Image
Image - Text
Text - Image.
I tried to position the images with float: right and float: left respectively. But all three images are positioned on the right again and again.
Can you help me? Thank you very much.
<div class="Food">
<div>
<p class="Foodtext">
fvjkhfhikvfdhilvdlhifbikfddbuukubfkuvbduhvdjhvdfkuvhukufvhjkdfuubfdkuhvhukvvhukfdubbf
</p>
</div>
<div>
<img src=speise.jpg alt="Speise" style="float: right">
</div>
</div>
<h3>Wine</h3>
<div class="Wine">
<p class="Winetext">
fhkvbshukveuvbkdfjvbuvfdsfkufbekfbgkrbkfewrrkgbgburfbuehu
</p>
</div>
<div>
<img src="wein.jpg" alt="Weinregal" style="float: left">
</div>
</div>
<h3>Music</h3>
<div class="Music">
<div>
<p class="Musictext"> vbhuireeehugoreiur8hgeoirorguuhghirruhgfuhkgrhukge</p>
</div>
<div>
<img src="dj.jpg" alt="DJ legt auf" style="float: right">
</div>
</div>
You've floated your images inside divs, by themselves. That's like trying to move to the right inside your clothing. Floated images should have the same parent as the content you want to flow around them.
So just combine the divs. You may even want your images inside the paragraphs.
Also, be sure to use a good editor (or at least run your code through an HTML validator). Either will make structural and semantic mistakes obvious.
<div class="Food">
<div>
<p class="Foodtext">
fvjkhfhikvfdhilvdlhifbikfddbuukubfkuvbduhvdjhvdfkuvhukufvhjkdfuubfdkuhvhukvvhukfdubbf
</p>
<img src="https://via.placeholder.com/100" alt="Speise" style="float: right">
</div>
</div>
<h3>Wine</h3>
<div class="Wine">
<p class="Winetext">
fhkvbshukveuvbkdfjvbuvfdsfkufbekfbgkrbkfewrrkgbgburfbuehu
</p>
<img src="https://via.placeholder.com/100" alt="Weinregal" style="float: left">
</div>
<h3>Music</h3>
<div class="Music">
<div>
<p class="Musictext"> vbhuireeehugoreiur8hgeoirorguuhghirruhgfuhkgrhukge</p>
<img src="https://via.placeholder.com/100" alt="DJ legt auf" style="float: right">
</div>
</div>
This is happening because you are styling the image while your image resides inside a new div.
Try this code instead
<div class="Food">
<div>
<p class="Foodtext">
fvjkhfhikvfdhilvdlhifbikfddbuukubfkuvbduhvdjhvdfkuvhukufvhjkdfuubfdkuhvhukvvhukfdubbf
</p>
</div>
<div style="float: right">
<img src=speise.jpg alt="Speise">
</div>
</div>
<h3>Wine</h3>
<div class="Wine">
<p class="Winetext">
fhkvbshukveuvbkdfjvbuvfdsfkufbekfbgkrbkfewrrkgbgburfbuehu
</p>
</div>
<div style="float: left">
<img src="wein.jpg" alt="Weinregal">
</div>
</div>
<h3>Music</h3>
<div class="Music">
<div>
<p class="Musictext"> vbhuireeehugoreiur8hgeoirorguuhghirruhgfuhkgrhukge</p>
</div>
<div style="float: right">
<img src="dj.jpg" alt="DJ legt auf">
</div>
</div>
do this and it should work you might need to specify the max-width of the divs as well and apply 100% width to the image in case you apply max-width, rest this should be working!
<div>
<div style='display:inline'>
<img src='https://m.media-amazon.com/images/M/MV5BMjA5MTkzNTY5Ml5BMl5BanBnXkFtZTgwNjU4MzY1MTI#._V1_QL50_SY1000_CR0,0,734,1000_AL_.jpg' height=300px>
</div>
<div style='display:inline'>
Twin Peaks
</div>
</div>
So I have the above image with a text next to it. The thing is that I want the text next to it to appear not on the bottom right but at the middle right/ top right of the image with some space between the image and text. How can I achieve it?
<div>
<div style='display:inline'>
<img src='https://m.media-amazon.com/images/M/MV5BMjA5MTkzNTY5Ml5BMl5BanBnXkFtZTgwNjU4MzY1MTI#._V1_QL50_SY1000_CR0,0,734,1000_AL_.jpg' style='vertical-align:middle' height=300px>
</div>
<div style='display:inline'>
Twin Peaks
</div>
</div>
Solved it by adding vertial-align:middle !
You can use position absolute on the text and then align the text anywhere you want using the top property.
Example:
<div>
<div style='display:inline'>
<img src='https://m.media-amazon.com/images/M/MV5BMjA5MTkzNTY5Ml5BMl5BanBnXkFtZTgwNjU4MzY1MTI#._V1_QL50_SY1000_CR0,0,734,1000_AL_.jpg' height=300px>
</div>
<div style="display:inline; position:absolute;">
Twin Peaks
</div>
</div>
You can achieve it by using flex in the parent. Just set align-items: center
<div style="display: flex; align-items: center;">
<div>
<img src='https://m.media-amazon.com/images/M/MV5BMjA5MTkzNTY5Ml5BMl5BanBnXkFtZTgwNjU4MzY1MTI#._V1_QL50_SY1000_CR0,0,734,1000_AL_.jpg' height=300px>
</div>
<div style="margin-left: 10px;">
Twin Peaks
</div>
</div>
<div>
<div style="float: left;">
<img src="https://m.media-amazon.com/images/M/MV5BMjA5MTkzNTY5Ml5BMl5BanBnXkFtZTgwNjU4MzY1MTI#._V1_QL50_SY1000_CR0,0,734,1000_AL_.jpg" height="300px" />
</div>
<div style="float: left; margin-left: 10px;">
Twin Peaks
</div>
</div>
It'll set your Text top right side of your image.
<div class = "container-fluid">
<body style="background-color:#D3D3D3">
<h1 class="text-center">Nelson Mandela</h1>
<h3 class = "text-center"><em>A man who believed in freedom</em><h3>
<br>
<div style="background-color:gray" class="text-center">
<img class="img-responsive" style="margin:0px" src="https://b-i.forbesimg.com/mfonobongnsehe/files/2013/12/Mandela.jpg">
<p style="font-size:15px">"Education is the most powerful weapon which you can use to change the world."</p>
</div>
</body>
1st your <body></body> should be the container of all your HTML
2nd close your <h3> with </h3>
3rd add display: inline-block; to the div that contains the img and text will remove the extra space. (read more here: https://www.w3schools.com/css/css_inline-block.asp)
4th add text-align: center; to the parent will center the child (make sure your parent container have a width)
.inline-block {
display: inline-block;
}
.centered{
text-align: center;
}
<body style="background-color:#D3D3D3">
<div class="container-fluid centered">
<h1 class="text-center">Nelson Mandela</h1>
<h3 class="text-center"><em>A man who believed in freedom</em></h3>
<br>
<div style="background-color:gray" class="text-center inline-block">
<img class="img-responsive" style="margin:0px" src="https://b-i.forbesimg.com/mfonobongnsehe/files/2013/12/Mandela.jpg">
<p style="font-size:15px">"Education is the most powerful weapon which you can use to change the world."</p>
</div>
</div>
</body>
This question already has answers here:
Float 2 elements side by side inside a container div
(2 answers)
Closed 3 years ago.
I have loop that goes trough all pictures that I have and displays them. I would like to display them in one row, from left to right, but with css that I have is displaying them one under other. I have use flow but not sure if I used it correctly.
Here is my code:
.column.is-narrow {
float: right;
}
.box {
float: right;
}
<div class="column">
<div class="columns" ng-repeat="a in $ctrl.f">
<div class="column is-narrow">
<div class="box" style="width: 200px;">
<p class="title is-5">{{album}}</p>
<figure class="image is-128x128">
<!--<img ng-src="{{src}}"> remove and replaced for demo purpose-->
<img src="http://dummyimage.com/128x128" />
</figure>
<p class="subtitle">{{person}}</p>
</div>
</div>
</div>
I am aware that my css is not correct I have been searching for answer but couldn't find it.
Basically, when you float things, they'll still wrap if there isn't enough space to display both side by side. The easiest solution is to set a width on them to ensure that their container will always be wide enough to fit the content. You can do it with percentages or pixels, depending on your use case.
Note: If you use percentages, percentages adding up to 100% may still cause it to wrap, because they may not take into account padding, margin and/or border depending on other things. I usually do something like 49% for both, then float one right and one left.
You may use display and mind this inline-style <div class="box" style="width: 200px;"> wich is to start with, not wide enough to hold texts and img side by side
display:table/table-cell;
.column.is-narrow {
float: right;
}
.box {display:table;}
.box> p, .box> figure {display:table-cell;vertical-align:middle/* or top or else */
}
<div class="column">
<div class="columns" ng-repeat="a in $ctrl.f">
<div class="column is-narrow">
<div class="box" style="width: 200px;">
<p class="title is-5">{{album}}</p>
<figure class="image is-128x128">
<!--<img ng-src="{{src}}"> remove and replaced for demo purpose-->
<img src="http://dummyimage.com/128x128" />
</figure>
<p class="subtitle">{{person}}</p>
</div>
</div>
</div>
display:flex;
.column.is-narrow {
float: right;
}
.box {
display: flex;
/* removed width:200px from inline-style*/
}
p {
margin: auto;
}
<div class="column">
<div class="columns" ng-repeat="a in $ctrl.f">
<div class="column is-narrow">
<div class="box">
<p class="title is-5">{{album}}</p>
<figure class="image is-128x128">
<!--<img ng-src="{{src}}"> remove and replaced for demo purpose-->
<img src="http://dummyimage.com/128x128" />
</figure>
<p class="subtitle">{{person}}</p>
</div>
</div>
</div>
The easiest way is to declare the parent div as a flex container by setting the property display: flex and flex-direction:row. If you don't want to wrap your pictures, you can set flex-wrap:nowrap.
Here http://the-echoplex.net/flexyboxes/ is nice playground for flex box.
So I found the answer and it was pretty simple :)
I just had to add one more div with class with which I will float it to left. This is what I wanted:
.html
<div class="column">
<div class="columns">
<div class="float" ng-repeat="a in $ctrl.f"> /* added this line of code */
<div class="column is-narrow">
<div class="box" style="width: 200px;">
<p class="title is-5">{{album}}</p>
<figure class="image is-128x128">
<!--<img ng-src="{{src}}"> remove and replaced for demo purpose-->
<img src="http://dummyimage.com/128x128" />
</figure>
</div>
</div>
<p class="subtitle">{{person}}</p>
</div>
</div>
</div>
.css
.float{
float:left;
}
That was it. It's working. :)
I am using older Skeleton css version, it is a 16 column grid system. I am trying to setup similar layout as in this picture.
http://imgur.com/sIV2aYo
I am pretty new to CSS, is using two containers (one inside another) a proper method?
Here is a sample code of what I been trying, but not working out too well =(
<div class="container">
<div class="eight columns alpha">
<div class="image">
<img alt="" src="images/coffee.jpg">
</div>
</div>
<div class="eight columns omega">
<div class="container">
<div class="eight columns">
<img alt="" src="images/plate.jpg">
</div>
<div class="eight columns">
<img alt="" src="images/macaro.jpg">
</div>
<div class="text area">
<p class="quote">"One of my favorite parts of using Square Register is being able to talk to customers while I am swiping their cards."</p>
<p class="name">Norm Mui, Coffee Foundry</p>
</div>
</div> <!-- 2nd container -->
</div>
</div> <!-- 1st container -->
Thanks in advance.
I don't know your CSS, but maybe this helps you:
HTML:
// The class "columns" is your "block" (div) that needs the content. I've made a CSS with a background-color, height and width.
// In that div "columns we create new "columns, numbered by 1,2 and 3. I've floated all the text to the left and gived it a margin. The first, second and the third a margin of 15px ( top, right, buttom and left ).
// In the div column "columns" I have made a textarea with also a margin of 15px. The vertical-align is for a top vertical align. with the display we means that it needs to be in the block, with a margin of 40% ( it takes 40% of the block).
<div id="container">
<div class="columns">
<div class="eight-columns-1">
<img alt="" src="http://ww1.prweb.com/prfiles/2014/04/10/11752526/gI_134971_best-image-web-hosting.png">
</div>
<div class="eight-columns-2">
<img alt="" src="http://www.causingeffect.com/images/made/images/example/cow_100_100_c1.jpg">
</div>
<div class="eight-columns-3">
<img alt="" src="http://www.causingeffect.com/images/made/images/example/cow_100_100_c1.jpg">
</div>
<div class="textarea">
<p class="quote">"One of my favorite parts of using Square Register is being able to talk to customers while I am swiping their cards."</p>
<p class="name">Norm Mui, Coffee Foundry</p>
</div>
</div>
</div>
CSS:
.columns {background-color:yellow; width: 530px; height: 285px;}
.eight-columns-1 {float:left; margin: 15px;}
.eight-columns-2 {float: left; margin: 15px;}
.eight-columns-3 {float:left; margin: 15px 15px 15px 0px;}
.textarea {vertical-align:top; margin: 15px; display:inline-block; width: 40%;}