Original CODE:
div class="container body">
<div class="row">
<div>
<div class="bodyhead"><div>
<h1>We are a Creative Digital Agency</h1></div>
<div>
<p class="learn_more">Learn More</p>
</div>
</div>
<div>
<img class="laptop" src="/images/laptop.png">
</div>
</div>
</div>
</div>
I'd like to achieve the following by using CSS only
<div><center>
<p class="learn_more">Learn More</p>
</center></div>
Thank you very much.
Use the text-align property:
text-align: center;
http://jsfiddle.net/089tnjom/
<center> is now deprecated and not supported in HTML 5.
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!
▸ To achieve the proper layout for the direction letters and bidirectional arrows, use the CSS display property with table values. And for the table rows and cells, use CSS child selector rules, not class selector rules.
I wrote Html with div/row class but have to use child selector.How to change and no rewrite everything.Honestly even don't know how.This table has no border and in row date letters and images with arrow.I am just started to study html/css/js.
here is my html
thank you
<div class="Heading">
<div class="Cell">
<p class="diagonal"><img src="dablearow.png";></p>
</div>
<div class="Cell">
<h2>E</h2>
</div>
<div class="Cell">
<p></p>
</div>
</div>
<div class="Row">
<div class="Cell">
<h2>S</h2>
</div>
<div class="Cell">
<p><img src="dablearow.png" ></p>
</div>
<div class="Cell">
<h2>N</h2>
</div>
</div>
<div class="Row">
<div class="Cell">
<p></p>
</div>
<div class="Cell">
<h2>W</h2>
</div>
<div class="Cell">
<p class="diagonal"><img src="dablearow.png"></p>
</div>
</div>
I think you want this
.table{
display: table;
}
.table > div{
display: table-row;
}
.table > div > div{
display: table-cell;
width: 100px;
}
<div class="table">
<div>
<div>
<p class="diagonal"><img src="dablearow.png";></p>
</div>
<div>
<h2>E</h2>
</div>
<div>
<p></p>
</div>
</div>
<div>
<div>
<h2>S</h2>
</div>
<div>
<p><img src="dablearow.png" ></p>
</div>
<div>
<h2>N</h2>
</div>
</div>
<div>
<div>
<p></p>
</div>
<div>
<h2>W</h2>
</div>
<div>
<p class="diagonal"><img src="dablearow.png"></p>
</div>
</div>
</div>
Just use a table using the "table" tag.It would be much better.You won't need to make that div.Just a suggestion.Also use "td" for cells in the angled brackets with "th" for headers in table.All in quotation marks are supposed to be in angled brackets:<>
Having trouble trying to make two images show side by side, they are not aligned perfectly and I do not know how to fix it,
<article style="width:100%;">
<h1> Repair Services </h1>
<p> We repair computers </p>
<img src="http://lorempixel.com/400/200/" style="float:left">
</article>
<article style=";width:100%;">
<h1> Repair Services </h1>
<p> We repair computers </p>
<img src="http://lorempixel.com/400/200/" style="float:right">
</article>
here is the fiddle https://jsfiddle.net/Syystole/vfkg8018/11/
You can try this
<div style="float:left">
<article style="width:100%;">
<h1> Repair Services </h1>
<p> We repair computers </p>
<img src="http://lorempixel.com/400/200/" style="float:left">
</article>
</div>
<div style="float:left">
<article style="width:100%;">
<h1> Repair Services </h1>
<p> We`enter code here` repair computers </p>
<img src="http://lorempixel.com/400/200/" style="float:right">
</article>
</div>
use flex layouting
i updated your jsfiddle:
https://jsfiddle.net/vfkg8018/13/
wrap all into div and set class .side-by-side on wrapping div
.side-by-side{
display: flex;
flex-direction: row;
}
this code may solve your problem :
<article style="width:100%;">
<div style="float:right;width:50%">
<div style="float:right; margin-left:20px">
<h1> Repair Services </h1>
<p> We repair computers </p>
</div>
<div style="float:right">
<img src="http://lorempixel.com/400/200/">
</div>
</div>
<div style="float:right;width:50%">
<div style="float:right; margin-left:20px">
<h1> Repair Services </h1>
<p> We repair computers </p>
</div>
<div style="float:right">
<img src="http://lorempixel.com/400/200/">
</div>
</div></article >
As the title says, how do I center two divs next to each other perfectly?
My HTML: (or well, a bit of it)
<section class="team" id="team">
<div class="container">
<h3>The team behind CatCraft</h3>
<div class="divider">
<div class="hr">
<div class="hr-dot"></div>
</div>
</div>
<div class="row row-centered">
<div class="team-centered col-md-4">
<img src="http://cravatar.eu/helmhead/6a940db5e02d4bf79db9203a8b126f0d/140.png" alt="catx">
<h4 class="bold">CatX (Owner)</h4>
<p>Hi! I'm CatX and I'm the owner of CatCraft. I like anime and tech stuff. My favourite server is bending. =^_^=</p>
</div>
<div class="team-centered col-md-4">
<img src="http://cravatar.eu/helmhead/ef4fbdb6d629480d8f98ed9919c111e9/140.png" alt="__ast__">
<h4 class="bold">__Ast__ (Co-Owner)</h4>
<p>Example text, pls write something ;-;</p>
</div>
</div>
</div>
</section>
My CSS: (same here, this isn't all)
I tried to make a box for the css above too but it didn't work. http://pastebin.com/SzhAmh3f
Basically the problem I'm having is that the code above works kind of but one of the blocks are a little bit lower than the other and i have no idea why.
Yes, I know that there are other posts about this subject but no one worked for me so I decided to open my own.
There are a lot of unwanted styles actually to achieve this, you simply need the below code on your team-centered class. Remove row-centered class. It should look like this
CSS
.team img {
width: 140px;
height: 140px;
border-radius: 50%;
margin: 10px auto 40px;
}
.team-centered {
width: 50%;
float:left;
text-align: center;
}
HTML
<section class="team" id="team">
<div class="container">
<h3>The team behind CatCraft</h3>
<div class="divider">
<div class="hr">
<div class="hr-dot"></div>
</div>
</div>
<div class="row">
<div class="team-centered">
<img src="http://cravatar.eu/helmhead/6a940db5e02d4bf79db9203a8b126f0d/140.png" alt="catx">
<h4 class="bold">CatX (Owner)</h4>
<p>Hi! I'm CatX and I'm the owner of CatCraft. I like anime and tech stuff. My favourite server is bending. =^_^=</p>
</div>
<div class="team-centered">
<img src="http://cravatar.eu/helmhead/ef4fbdb6d629480d8f98ed9919c111e9/140.png" alt="__ast__">
<h4 class="bold">__Ast__ (Co-Owner)</h4>
<p>Example text, pls write something ;-;</p>
</div>
</div>
</div>
</section>
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