This is my simple code:
<h1 style="text-align:center;">Title TEST</h1>
<img class="center" src="MyImage.jpg">
<footer>
<p style="text-align:center;">Footer TEST</p>
</footer>
Text is centered correctly, the image not.. Why? I can't understand
In your current attempt, class="center" would have no meaning unless you have a class called .center defined in your CSS. It doesn't look like you have a stylesheet, though.
Here are two ways to center an image horizontally:
Use text-align: center on a parent element:
<div style="text-align: center;">
<h1>Title TEST</h1>
<img src="https://via.placeholder.com/350x150" />
<footer>
<p>Footer TEST</p>
</footer>
</div>
Center the image element itself by making it block-level and giving it a margin-left and margin-right of 0:
<h1 style="text-align: center;">Title TEST</h1>
<img style="display: block; margin: 0 auto;" src="https://via.placeholder.com/350x150" />
<footer>
<p style="text-align: center;">Footer TEST</p>
</footer>
Related
I have a page where I'm trying to override the height of the elements on it. I tried defining height, but it won't go below the height of the page as determined by the elements in it.
So how do I set the page at the height I want, regardless of elements?
<div class="entry-content">
<div class="greetings">If
you would like... </div>
<p> </p>
<p> </p>
<p> </p>
<div class="number2">#1</div>
<div class="w">
<center>
</p>
<p style="border:5px;
border-style:solid; border-
color:#fff; padding:
0.5em;"><img class="alignnone size-
medium
wp-image-41" src="http://4309.co.uk/wp-
content/uploads/2020
/04/IMG_2020_112949-
scaled.jpg" alt="" width="95%" height="95%" /></p>
<p>
</center>
</div>
<p> </p>
<p> </p>
<div class="number2">#2</div>
<div class="w">
<center>
</p>
The element defining height here seems to be w. How to get css to ignore that and set height at any height I choose, for example 300px?
At the moment defining height by
.page-id-8122 {height:
300px;}
Doesn't work, but defining height at 800000px does. I'm assuming because there's nothing stopping the page height increasing, but element w is stopping it decreasing?
<body class="page-template-
default page page-id-8122
logged-in admin-bar
no-customize-support wp-
custom-logo cookies-set
cookies-accepted has-
sidebar-right">
<div id="page"
class="site">
<a class="skip-link screen-
reader-text"
href="#content">Skip to
content
</a>
Page here
Html as i wrote it.
<div class="number2">#1</div><div class="w"><center><p style="border:5px; border-style:solid; border-color:#fff; padding: 0.5em;"><img class="alignnone size-medium wp-image-41" src="http://4309.co.uk/wp-content/uploads/2020/04/IMG_20203_112949-scaled.jpg" alt="" width="95%" height="95%" /></p></center></div>
I want the text to be next to the dog, but when I use < br>... it goes under the dog
(dog is display: inline-block)
https://codepen.io/TylerL-uxai/pen/pweOWN
<div class="text-center">
<h1>
<img src="https://image.ibb.co/dCx2Ck/logo.png" style="display: inline-block" />
Pet Stay<br>
&<br>
Vacay
</div>
The problem is that display: inline-block is only applied to the image, and not to the accompanying text. What I would recommend is to separate out the image from the text, and give both display: inline-block:
<div class="text-center">
<img src="https://image.ibb.co/dCx2Ck/logo.png" alt="logo" border="0" style="display: inline-block" />
<h1 style="display: inline-block">
Pet Stay<br> &
<br> Vacay
</h1>
</div>
Alternatively, you can make use of floats, which allow your content to be displayed right next to each other, and flex to ensure that text is vertically centralised:
.text-center .left-column, .text-center .right-column {
float: left;
height: 175px;
display: flex;
align-items: center;
justify-content: center;
}
<div class="text-center">
<div class="left-column">
<img src="https://image.ibb.co/dCx2Ck/logo.png" alt="logo" border="0" />
</div>
<div class="right-column">
<h1>
Pet Stay<br> &
<br> Vacay
</h1>
</div>
</div>
Note that you have your paragraph and image inside an (un-closed) <h1> tag, which I've removed for the purpose of my examples. <h1> is reserved for header text. I'm assuming you want the text to have the header styles, so I've replaced the <p> tags with <h1> tags in the examples.
Hope this helps! :)
You just need to wrap your text and use inline-block for the wrapper:
<div class="text-center">
<h1>
<img src="https://image.ibb.co/dCx2Ck/logo.png" alt="logo" border="0" style="display: inline-block" />
<div style="display: inline-block">
Pet Stay
<br>
&
<br>
Vacay
</div>
</h1>
</div>
I am trying to align my text under a line of 3 images using HTML/CSS. As
soon as i remove my comments it aligns everything vertically.
<div class="inline">
<img class="rel" src="http://imgur.com/a/n2skT.png" alt="icon" />
<!-- <p> This is a test</p> -->
<img class="rel" src="http://imgur.com/a/n2skT.png" alt="icon" />
<!-- <p> This is a test</p> -->
<img class="rel" src="http://imgur.com/a/n2skT.png" alt="icon" />
<!-- <p> This is a test</p> -->
</div>
See my example https://jsfiddle.net/gvrr25bk/1/
Thanks in advance!
Ivan
you could wrap each img with it's p inside a div and add display:inline-block to that div instead
.inline {
text-align: center;
}
.wrap {
display: inline-block;
margin: 0 2%;
}
<div class="inline">
<div class="wrap">
<img class="rel" src="http://imgur.com/a/n2skT.png" alt="icon" />
<p> This is a test</p>
</div>
<div class="wrap">
<img class="rel" src="http://imgur.com/a/n2skT.png" alt="icon" />
<p> This is a test</p>
</div>
<div class="wrap">
<img class="rel" src="http://imgur.com/a/n2skT.png" alt="icon" />
<p> This is a test</p>
</div>
</div>
see more here CSS align and here CSS inline-block or in general about css CSS w3schools
about HTML blocks and inline elements see here HTML Block and Inline Elements
the idea to the solution i gave you is that if you want the image to stay together with it's text , you should put them in the same container separately. in that way they will always stay together as you want.
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.
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