I want to do following:
A div containing an image 50x50 and text next to it of font 25px.
Image and text should align in middle.
The div containing image and text should align to center of it parent.
I tried the followint but it does not give the desired result.
What needs to be done?
http://www.w3schools.com/css/tryit.asp?filename=trycss_layout_float
<html>
<head>
<style>
img {
float: center;
}
</style>
</head>
<body>
<p align="center"><img src="w3css.gif" alt="W3Schools.com" width="50" height="50">
Lorem .</p>
</body>
</html>
Try this:
<p align="center"><img src="http://www.ifn-modern.com/skin/frontend/fortis/default/images/phone.png" alt="" width="50" height="50">
Lorem .</p>
p img{
display:inline-block;
vertical-align:middle;
margin-right:5px;
}
Here is jsfiddle link: https://jsfiddle.net/x376p83x/
You can do this with flexbox:
.parent {
height: 300px;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
background-color: lightgrey;
}
p {
font-size: 25px;
}
<div class="parent">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio.</p>
<img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcS1EcWaTLIwhn69VJFubIdi4cpn2MYbkYN8hvMk00abhBHoO5fTnjdTgLY" alt="W3Schools.com" width="50" height="50">
</div>
please check this plunker
https://plnkr.co/edit/wlIixTpqm2dUJnalb9b6?p=preview
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<h1>Centered Div</h1>
<div class="parent-div">
<div class="child-div">
<span class="my-text">Iam Centered centerd text very long Iam Centered centerd text very long</span>
<img src="test.svg" style="width:50px; height:50px;"/>
</div>
</div>
</body>
</html>
and CSS
/* Styles go here */
.parent-div{
background:green;
padding:10px;
}
.child-div{
display:table;
margin:0 auto;
text-align:center;
color:white;
}
.my-text{
max-width:200px;
display:inline-block;
}
Generally speaking, you would use text-align: center on the parent container.
http://www.w3schools.com/cssref/pr_text_text-align.asp
You can also achieve this using margins, i.e. margin: 0 auto
where '0' is your vertical margins, and 'auto' calculates the horizontal margins automatically - thus positioning your element in the centre.
For your use case, I'd suggest text-align.
try this
html
<p class="cetner"><img src="http://www.planwallpaper.com/static/images/butterfly-hq-wallpaper_09354994_256.jpg" alt="image" width="50" height="50">
Lorem .</p>
css
p.cetner {
width: 100px;
height: 50px;
text-align: center;
}
img {
display:inline-block;
vertical-align:middle;
}
Related
I am trying to make the text appear below the image but it is not budging at all. My goal is it make the text appear below the image in the container
.left-col p {
text-align: justify;
width: 300px;
}
.left-col img {
margin: 0 auto;
left: 5%;
width: 300px;
height: 130px;
position: absolute;
text-align: center;
}
</head>
<body>
<div class="header">
<h1>The 3 Column Layout</h1>
</div>
<div class="container">
<div class="left-col">
<img src="Cyber.jpg" width="200" height=150"/>
<p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec iaculis neque nec luctus maximus. Donec eu eleifend libero, nec scelerisque metus. Morbi volutpat turpis pretium
</p>
Instead of using position absolute, remove it. Reason is that the element is positioned relative to its first positioned (not static) ancestor element. So, you could of course mess with top, right and left values to make it work but it would not be responsive at all.
Read more about it here: MDN Position CSS
The default value of position is static, this way the elements renders in a specific order(its what you want, render img and p after).
This is the pen if you need:
<div class="header">
<h1>The 3 Column Layout</h1>
</div>
<div class="container">
<div class="left-col">
<img src="https://via.placeholder.com/200x150" width="200" height="150" />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec iaculis neque nec luctus maximus. Donec eu eleifend libero, nec scelerisque metus. Morbi volutpat turpis pretium </p>
</div>
</div>
.left-col p{
text-align: justify;
width:300px;
}
.left-col img{
width:300px;
height: 130px;
}
Also, instead of setting width 300px to paragraph and img, you could set only one time to your .left-col div. I have also removed other properties that you were not using.
another note is that you forgot the " on height attribute.
In css there is use [ position absolute ] For the image and is not used in the text You must set the position in the image and the text or leave it to the default setting I deleted it from the image properties in css
.left-col p{
text-align: justify;
width:300px;
}
.left-col img{
margin: 0 auto;
left: 5%;
width:300px;
height: 130px;
text-align:center;
}
<body>
<div class="header">
<h1>The 3 Column Layout</h1>
</div>
<div class="container">
<div class="left-col">
<img src="Cyber.jpg" width="200" height=150"/>
<p><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec iaculis neque nec luctus maximus. Donec eu eleifend libero, nec scelerisque metus. Morbi volutpat turpis pretium </p>
</body>
Remove the line 'position: absolute;' from CSS. Complete (close) the DIV and P tags. You may introduce '.container{...}' where you may position (or whatever) the image-and-text together. You may wish to use 'margin: 0;' to glue the text to the image. Good luck!
I have two p tags
<p style="margin: 0; display: inline;">content1</p>
<p style="margin: 0; display: inline;" align="right">content2</p>
The Output is content1content2. My expectation is like this:
content1 content2
Can anyone help. I want one "content1" in the left p and "content2" in the right 'p'.
You can use CSS flexbox for this. Below is the minimal CSS for the requested layout:
<div style="display: flex; justify-content: space-between;">
<p style="background-color: papayawhip;">Lorem ipsum dolor sit amet.</p>
<p style="background-color: palegoldenrod;">Donec eget luctus lacus.</p>
</div>
For longer content, you can use fixed-width columns:
<div style="display: flex; justify-content: space-between;">
<p style="flex-basis: 49.5%; background-color: papayawhip;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eget luctus lacus. Cras consectetur elementum mi sed consequat.</p>
<p style="flex-basis: 49.5%; background-color: palegoldenrod;">Pellentesque aliquet condimentum augue in mattis. Praesent sagittis nisl magna, a volutpat arcu imperdiet vel. Quisque et orci sed ligula cursus luctus.</p>
<!-- 49.5% + 49.5% = 99%, remaining 1% is distributed according to justify-content -->
</div>
You could do it with floats:
<p style="margin:0;display:inline;float:left">content1</p>
<p style="margin:0;display:inline:float:right" >content2</p>
The idea of the tag <p></p> is to display a paragraph. So HTML offers you the <div></div> which is a container conecpt. So you should use Salman A's Solution, because there aren't just different tags in html for no reason. Actually you can style a paragraph with css so it is getting displayed the same as a div container, but it is not meant to be like that.
I don't want to say to you, what you have to do. I just wanna help you using the "correct" tags for the things they were made for.
What you really want is something that doesn't assume sufficent width to fit both paragraphs into one line:
* { box-sizing: border-box; }
.two { width: 30em; max-width: 100%; }
.two p { display: inline-block; max-width: 50%; }
.two p:nth-child(1) { float:left; }
.two p:nth-child(2) { float:right; }
<div class="two">
<p>This is the first paragraph of two.</p>
<p>This is the second paragraph of two.</p>
</div>
Here's another quick turnaround to achieve this:
p{
text-align: center;
}
.item p{
display: inline-block;
}
.leftContent{
text-align: left;
width: 50%;
}
.rightContent{
text-align: right;
width: 50%
}
<br>
<!--Use both P tags in the same line without space -->
<article class="item">
<p class="leftContent">Content1</p><p class="rightContent">Content2</p>
</article>
float:left, float:right.... or
width:49.9%;
display:inline;
text-align:left;
text-align:right;
In my fiddle you will see a break in text, I would like to put a <hr> there and decorate it in the CSS, but I have no idea how to do this as when I do this it breaks my inline-block, and I'm thinking that's because the <hr> is a block element. Is there any creative solutions around this? I need it to be fixed there between the two paragraphs of text to maintain responsiveness.
Thanks!
FIDDLE
HTML:
<section>
<div class="first">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut rutrum, nisl id ultricies sollicitudin, neque sapien porta nisl, ut gravida elit quam id nisi. <br /><br />Nunc viverra laoreet porttitor. Duis augue justo, pellentesque a luctus eget, luctus a quam. Fusce nec neque nec dolor mattis tempor id vitae nisi.</p>
<img class="ipad" src="http://img1.lesnumeriques.com/news/26/26963/ipad-4-os.jpg">
</div>
</section>
CSS:
.first {
height: 100%;
line-height: 0;
}
.first p {
vertical-align: middle;
display: inline-block;
width: 49%;
}
.ipad {
vertical-align: middle;
display: inline-block;
width: 49.2%;
}
p {
margin: 0;
padding: 1em 0;
font-size: 1.8em;
line-height: 1.5;
}
You could achieve this by wrapping your <p> and <hr> elements into another <div> element, and making it display:inline-block. My solution involved adding this wrapper so your structure ended up being:
<section>
<div class="first">
<div class="text-wrap">
<p></p>
<hr />
<p></p>
</div>
<img class="ipad" src="http://img1.lesnumeriques.com/news/26/26963/ipad-4-os.jpg" />
</div>
</section>
(Additional element is .text-wrap. Note that I split up the two paragraphs into individual <p> elements.) The CSS I left mostly alone, except I removed the definition for .first p, and added these two:
.text-wrap{
vertical-align: middle;
display:inline-block;
width:49%;
}
.text-wrap p {
vertical-align: middle;
display: inline-block;
}
Here's a JSFiddle example that shows what this achieves. If this isn't what you were looking for, or you wanted to use a different method, let me know and I'll be happy to help further!
Here's an alternative to Serlite's answer. It basically puts the <hr> in implicitly, using CSS.
fiddle
We add a border to the top of each paragraph, except the first one in each container.
p {
...
border-top: 1px solid black;
}
p:nth-child(1) {
border-top: none;
}
Here is an SSCCE to show my problem:
<html>
<head>
<title>SSCCE for problem</title>
<style type="text/css">
h1 {font-size: 2em;}
h5 {font-size: 1.3em; margin: 1em;}
</style>
</head>
<body style="text-align: center;">
<div style="background-color: #C0C0C0;">
<div style="background-color: #B0B0B0; float:left; padding: 1em;"><h1 style="">Welcome to<br/><img src="http://www.oddllama.cu.cc/logo.png" alt="OddLlama Productions"
title="Welcome to OddLlama Productions!"/></h1>This is some sample text.</div>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent in est non dui dictum eleifend. Proin tempor sodales odio, vitae laoreet orci vehicula blandit.
Curabitur vitae tellus odio, nec vehicula leo. Nam ac urna nisi, eget molestie dui.</div>
</div><br/>
<span style="width: 25%; float: left; clear: left; background-color: #D0D0D0"><p>
<h5>SOMETHING</h5>Stuff.<br/>Stuff.<br/>Stuff.<br/>Stuff.<br/>Stuff.<br/>
</span>
<span style="width: 50%; float: left; background-color: #DDDDDD">
<h1>SSCCE</h1>
<p>This is an SSCCE.</p>
<p>Lorem ipsum dolor sit amet,<br/>consectetur adipiscing elit.<br/>Praesent in est<br/>non dui dictum eleifend.<br/>Proin tempor<br/>sodales odio,<br/>vitae
laoreet orci<br/>vehicula blandit.<br/>Curabitur vitae<br/>tellus odio,<br/>nec vehicula leo.<br/>okay good enough.</p>
</span>
<span style="width: 25%; float: left; background-color: D0D0D0"><p>
<h5>More stuff!</h5>
<p>I'll just put a bunch of line breaks to take up space<br/><br/><br/><br/><br/><br/><br/><br/>okay good</p>
</span>
<p style="clear: both;"><br/>THIS IS A THING AT THE BOTTOM it is a footer yay footers are footery and footeriness is footy okay why am I typing this this is awkward but
I must take up more space spaciness is spacey<br/><br/>okay good</p>
<br/><div style="padding: 10px;"></div><hr/><div style="padding: 10px;"></div>
</body>
</html>
And here is an image of how it renders:
How can I make the circled div that contains the text expand down so it is the same height as the one with the image? I placed them both in a common parent div, but no matter what attributes or styles I tried to use, it wouldn't expand down.
Is there an expand: down CSS thing, or some alternative that I can use to make my text expand downwards?
Unfortunately, there is no there is no expand:down attribute in CSS :)
But you do have some alternatives. The most common solution for this is by using the .clearfix method.
When you float some children elements, the parent (container) doesn't take in effect the height of those floated children. That's where you need to add the clearfix class.
.clearfix:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
.clearfix {
display: inline-block;
}
html[xmlns] .clearfix {
display: block;
}
* html .clearfix {
height: 1%;
}
here's a fiddle
PS: it's compatible in very old IE versions too!
I'm trying to align a <div> with a <h2> inside it at the bottom of a parent div. The best way to show you is through code so here's the JSFiddle example: http://jsfiddle.net/3GGa7/
As you can see, the project-title div (and the <h2> inside it) is aligned to the top of the project-header div. I would like it to sink to the bottom of that div, to look like this:
However if I apply a margin-top to project-title it pushes everything down rather than just that div, and if I apply a padding the black background will cover the image.
What's the most elegant way to accomplish this?
Since the .project-title must be contained within the .project-header, give the .project-header a position:relative; and the .project-title a position:absolute;
.project-header {
height: 100px;
position:relative;;
}
.project-title {
background: black;
opacity: 0.75;
position:absolute;
bottom:0px;
left:0px;
right:0px;
}
Check it out http://jsfiddle.net/gXyEU/
This way, whether you use a bigger image, or change its position or margin, you'll never have to worry about the title, it will always be positioned where it should be.
If your picture size is steady. You can try the css below:
.project {
width: 335px;
float: left;
border: 1px solid #ccc;
border-radius: 6px;
}
.project-header {
height: 100px;
}
.project-title {
background: black;
opacity: 0.75;
float:left;
width:100%;
margin-top:25%;
}
.project-title h2 {
color: #fff;
margin-bottom:0px;
float:left;
}
just close your project-header div before start of project-title div like as
<div class="project">
<div class="project-header" style="background-image:url('http://placekitten.com/200/300');" ></div>
<div class="project-title">
<h2>Project title</h2>
</div>
<div class="project-description">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ornare felis id enim dignissim dapibus. Maecenas dui mi, ullamcorper eget semper non, varius quis orci. Suspendisse lobortis nibh sed nisi luctus dictum. Sed vel arcu eros. Etiam id varius neque. Cras ac sapien in est fringilla tempor vitae et est.</p>
</div>
</div>
FIDDLE is here
If you don't mind setting the width of .project-header
.project-header {
width: 335px;
height: 100px;
display: table-cell;
vertical-align: bottom;
}
Modified JSFiddle