I have...
div img
{
float:left;
}
strong
{
text-align:center;
}
<div>
<p>
<img src='image.png'/>
<strong>Lorem ipsum...</strong>
</p>
</div>
Everything is cool, but strong is not aligning center of div, just between free space.
Try wrapping your image and your text in separate div tags and applying your styles to those.
HTML
<div class="imageDiv">
<img src='http://www.elblogdeyes.com/wp-content/uploads/its-something.jpg'/>
</div>
<div class="textDiv">
<p>
<strong>Lorem ipsum...</strong>
</p>
</div>
CSS
div.imageDiv{
float: left;
width: 30%;
}
div.textDiv {
float: left;
text-align: center;
width: 70%;
}
This is my holy grails when it comes to centering stuff in css.
Hope it can help you
http://howtocenterincss.com/
Related
Like when adding a text and a picture floating to the left.
Normally, when the text changes its digits, the picture will move its position to the left or right depending on the amount of digits.
Here is an example of what I mean:
<div>
<img src="https://image.freepik.com/free-vector/blue-wavy-forms-on-a-transparent-background_1035-6744.jpg">
<p>123</p>
<img src="https://image.freepik.com/free-vector/blue-wavy-forms-on-a-transparent-background_1035-6744.jpg">
<p>123</p>
</div>
<style>
img{
display:inline-block;
height:30px;
}
p{
display:inline;
}
</style>
My question is: How to make the images' position static so that no matter the digits of the text beside it?
You can give your text a width:
p{
display:inline-block;
width: 50px;
}
Changed your markup a bit and added some CSS. Let me know if this is what you were looking for.
html
<div>
<div class="image-container">
<img class="left-floated-image" src="https://image.freepik.com/free-vector/blue-wavy-forms-on-a-transparent-background_1035-6744.jpg">
<p>1232323232323323</p>
</div>
<div class="image-container">
<img class="left-floated-image" src="https://image.freepik.com/free-vector/blue-wavy-forms-on-a-transparent-background_1035-6744.jpg">
<p>1232323232323323</p>
</div>
</div>
css
.image-container {
display: inline-block;
}
img.left-floated-image {
float: left;
height: 30px;
}
p {
display: inline-block;
width: 30px;
word-wrap: break-word;
}
What you can do is wrap each of the image-paragraph pairs in their own div and float those divs next to each other. Give those divs a specific width.
Then, you can float the images to the left, and that will make the paragraphs wrap around them when they hit the boundary of their parent div, like so:
div {
float: left;
width: 65px;
}
img {
float: left;
width: 30px;
height: 30px;
}
<div>
<img src="https://image.freepik.com/free-vector/blue-wavy-forms-on-a-transparent-background_1035-6744.jpg">
<p>123 456 789 101112</p>
</div>
<div>
<img src="https://image.freepik.com/free-vector/blue-wavy-forms-on-a-transparent-background_1035-6744.jpg">
<p>123</p>
</div>
Note that if you float the image and paragraphs left, the paragraphs will only float next to the images if their container div is wide enough to fit them both (which in this example below it is not, thus the first paragraph wraps below the first image).
div {
float: left;
width: 65px;
}
img {
float: left;
width: 30px;
height: 30px;
}
p {
float: left;
}
<div>
<img src="https://image.freepik.com/free-vector/blue-wavy-forms-on-a-transparent-background_1035-6744.jpg">
<p>123 456 789 101112</p>
</div>
<div>
<img src="https://image.freepik.com/free-vector/blue-wavy-forms-on-a-transparent-background_1035-6744.jpg">
<p>123</p>
</div>
So I was trying achieve this logo but the text wont go in middle.
I have tried vertical align and line-height but no luck. Hope someone helps :)
Code:
<div>
<div id="logo">
<div id=""></div>
<p>title<br>
text</p>
</div>
<div id="">
</div>
</div>
CSS
#header {height: 100px; background: #fff}
#logo div {background: url(/img/logo.png) center/contain no-repeat; width: 70px; height: 70px; float: left}
#logo p {vertical-align: middle}
try this css on the container element
display: flex;
align-items: center;
justify-content: center;
If you're using html and css, just make sure that both the text and the image are in the same div.
You can also follow this tutorial if that can make it easier: https://css-tricks.com/text-blocks-over-image/
Hope this works .
simple example
<div>
<img style="vertical-align:middle" src="https://placehold.it/60x60">
<span >verticle text.</span>
</div>
There are a few methods.
One of them is:
#parent {display: table;}
#child {
display: table-cell;
vertical-align: middle;
}
Try with text:
transform: translate(12px, 76px); //adjust it to fit your needs
Well flexbox is the easiest way to go around
<div id='foo'>
<div id='logo'><img src='path.png'></div>
<div id='text'>Title HEre</div>
</div>
CSS:
#foo {
display:flex;
align-items:center;
}
So this is probably an easy answer, but my image which is supposed to be sitting in the middle of the page is slightly off and it's irritating me a lot.
HTML:
</section>
<section class="img_section">
<div>
<img src="images/menu.jpg" alt="menu" align="center">
</div>
</section>
CSS:
img section{
float:center;
text-align:center;
}
I've tried removing float, and taking it out of a section entirely, but it won't budge.
Any help would be amazing
there's no such thing as float: center;
also img section doesn't style image within section.
you could try either:
1:
img {
display: block;
margin: 0 auto;
}
2:
section div {
text-align: center;
}
section div img {
display: inline-block;
}
depending on your other styles
This is simple to answer.
#div1 {
text-align: center;
}
</section>
<section class="img_section">
<div id="div1">
<img src="images/menu.jpg" alt="menu" align="center">
</div>
</section>
The text-align: center; property is going to make all the elements inside the div centered. Also, it is better if you select the div with a specific class or ID. This is going to go on all div elements on the page.
this is much more simple. just include center tag as
<center>
<section>
<div>
<img src="images/menu.jpg" alt="menu" align="center">
</div>
</section>
</center>
try in css:
.img_section img{
text-align:center;
}
html:
<section class="img_section">
<img src="images/menu.jpg" alt="menu" align="center">
</section>
I like to use
margin: 0 auto;
for centering
I am trying to align two different divs next to each other using inline-block, but they are instead stacking like a blocked element. Specifically, they are the wrapper_image div containing an image, and the about_div containing some text information.
I have the following HTML:
<body>
<header>
... header information here
</header>
<div class="wrapper_image">
<img src="img/1935323_10153090821883239_4407778661294134622_n.jpg" class="profile-photo">
</div>
<div class="about_div">
<h3 id="about_me">About Me</h3>
<p id="about_me_info">
Text
</p>
<p id="about_me_info">
Some more text
</p>
</div>
<footer>
<p>
© Name
</p>
</footer>
</body>
And CSS:
.wrapper_image {
display: inline-block;
vertical-align: top;
}
.about_div {
display: inline-block;
vertical-align: top;
}
.profile-photo {
max-width: 350px;
border-radius: 100%; /* adds rounded corners to an element */
}
#about_me {
font-size: 2em;
}
#about_me_info {
font-size: 1.5em;
}
everything seems oks.
I put a demo picture and display in chrome and this is what looks like
The image and the text are inline-block and seems ok
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/