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
Related
For my class I have to have 3 divs floated left in a row with the outer two half the size of the middle one. It's driving me crazy that the rows aren't centered on the page. Is there a way to center them without getting rid of the float?
I tried creating a container div with text-align just as a shot in the dark but that didn't work. All other research I've seen is to change the float to display but I have to use float so I can't do that.
div.container {
width: 100%;
text-align: center;
border: none;
background-color: pink;
height: 100%;
}
div.cover {
width: 20%;
}
div.author {
width: 50%;
font-family: calibri;
}
div.links {
width: 20%;
}
<div class="cover">
<p class="inner">
<img src="Images/Divergent.jpg"><br>
</p>
</div>
<div class="author">
<p class="inner" style="margin-top: 10px;">
<b>Divergent<br>Veronica Roth</b><br>
</p>
</div>
<div class="links">
<ul>
<li>
<p class="link" onclick="parent.open('https://www.britannica.com/biography/Veronica-Roth')">
https://www.britannica.com/biography/Veronica-Roth
</p>
</li>
</ul>
</div>
Your instinct to wrap the 3 "columns" in a container div is correct. This allows you to use what is commonly referred to as the "clearfix" trick. Items that are "floated" are ignored by the normal box flow of the page which is why the container seems to collapse and ignore your floating contents.
Frustrating indeed!
This is the "clearfix":
div.container:after {
content: ''; /* no content in this pseudo element */
display: table; /* be 100% wide */
clear: both; /* clear the previous floats */
}
The :after pseudo selector on the container is the same thing as putting an empty div as the last item in the container. By clearing the floats, the container will wrap around the floating items.
This is a hack... but it works! The entire web development community has used this to "fix" the difficulties inherent with using floats for years to create layouts before the advent of real layout systems like Flexbox and CSS Grid.
After the container clears the floating items inside, just set the widths so that they add up to 100% and you are good.
div.container {
width: 100%;
text-align: center;
border: none;
background-color: pink;
height: 100%;
}
div.container:after {
content: '';
display: table;
clear: both;
}
div.cover {
width: 25%;
float: left;
}
div.author {
width: 50%;
font-family: calibri;
float: left;
}
div.links {
width: 25%;
float: left;
}
<div class="container">
<div class="cover">
<p class="inner">
<img src="Images/Divergent.jpg"><br>
</p>
</div>
<div class="author">
<p class="inner" style="margin-top: 10px;">
<b>Divergent<br>Veronica Roth</b><br>
</p>
</div>
<div class="links">
<ul>
<li>
<a href="https://www.britannica.com/biography/Veronica-Roth">
Veronica-Roth
</a>
</li>
</ul>
</div>
</div>
div.container position:relative;
div.cover float:left;
div.autor put inside tag align="center"
div.links float:right;
or
div.autor margin:5%;
or
display:inline-block;
or you can use text-align:center; in css on the parent div and then display:inline-block; on each div inside the parent div
I am trying to display an image next to two lines of text, which are centered. I have attached an example, and you will see from it that the image is to the left of the text, whereas I am trying to center the image to be on the left side of the text, and have a perfectly centered image/text.
CSS:
.center-class{
text-align:center;
}
.righty img{
max-width: 100px;
float:left;
}
.vid-open{
}
HMTL:
<section class="">
<div class="row pull-down">
<div class="center-class">
<div class="righty">
<img src="http://www.psdgraphics.com/file/white-egg.jpg" >
<h2>This is a header.</h2>
<h5 class="vid-open">some text some text some text<span class="icon-right-left-01-011" ></span></h5>
</div>
</div>
</div>
</section>
SEE DEMO
Simply wrap the text in a div and display it inline-block:
.center-class {
text-align: center;
}
.righty > * {
display: inline-block;
vertical-align: middle;
}
.righty img {
max-width: 100px;
}
<section class="power-of-egg">
<div class="row pull-down">
<div class="center-class">
<div class="righty">
<img src="http://www.psdgraphics.com/file/white-egg.jpg">
<div class="con">
<h2>This is an egg.</h2>
<h5 class="vid-open">eggs are very nutritious<span class="icon-right-left-01-011" ></span></h5>
</div>
</div>
</div>
</div>
</section>
Updated Codepen
Well, this will center the entire block:
.center-class{
text-align:center;
}
.righty img{
max-width: 100px;
float:left;
}
.vid-open{
}
.righty {
width: 300px;
margin: 0 auto;
}
The problem is that you've got your image inside of a div and div is a block-level element, which means it will expand to be the full width of its parent element.
If you take the image out of the div and make the div that contains the text have:
display:inline-block;
That div will shrink down to be only as wide as its content.
Here's your updated code: http://codepen.io/anon/pen/LNNJRQ
To horizontally center an element you can use display: block; and margin: auto;. There may be a better approach but this is the css I used to have the image in the center and the text to the right of it:
.righty > .con {
position: absolute;
top:0;
left: 55%;
}
.righty img {
display: block;
vertical-align: middle;
margin: auto;
max-width: 100px;
}
Note: the position of the class .con will vary based on screen size.
Here is the updated codepen.
If you take a look at the following jsfiddle:
http://jsfiddle.net/xs5trzxx/
<div class="box">
<h1>This heading</h1>
<h1>This is one heading</h1>
</div>
.box {
width: 350px;
}
h1 {
display: inline-block;
background: url('http://networkmotion.rnmcloud.com/wp-content/themes/networkmotion/images/blue_arrows.png') no-repeat right top;
padding-right: 100px;
}
As you can see the width of the first heading is the width of the text and the background image sits nicely after the text. In the second heading though the width of the heading doesn't fit to the width of the text so the background image is floating off to the right.
How can I make the width of the headings always shrink to be as small as possible so that the background image is always close to the text?
Please remove width
h1 {
display: inline-block;
background: url('http://networkmotion.rnmcloud.com/wp-content/themes/networkmotion/images/blue_arrows.png') no-repeat right top;
padding-right: 100px;
}
<div class="box">
<h1>This is one heading</h1>
<h1>This heading</h1>
</div>
If you want to show all h1 in new line then add all h1 in different div tag
You could set the headings to display: inline;. But you'll also have to clear them if you have more than one (to prevent them sitting side by side, which is easy enough but off topic).
.box {
width: 350px;
}
h1 {
display: inline;
background: url('http://networkmotion.rnmcloud.com/wp-content/themes/networkmotion/images/blue_arrows.png') no-repeat right top;
padding-right: 100px;
}
<div class="box">
<h1>This is one heading</h1>
</div>
Remove width of ".box" will make it work. But the heading will always 1 line. If you allow multi-line heading, maybe you can try below:
.headTxt {
float:left;
width: 150px;
margin:0px;
}
.headImg {
float: left
}
<div>
<h1 class="headTxt">This is one heading</h1>
<div class="headImg"><img src='http://networkmotion.rnmcloud.com/wp-content/themes/networkmotion/images/blue_arrows.png' /></div>
</div>
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/
I am trying to set text at a center of a box when a number is not present, and when number is present text should go to top and number at the bottom.
I am able to show with number box correctly but without number box is vertical alignment does not work.
I am an HTML new bee.
Can someone help me here? I have looked at various articles and they point to using table cell and vertical alignment as middle. I tried that as well, I think the red box does not have text in the middle.
Here is an example.
http://jsfiddle.net/seohh5r1/2/
<!DOCTYPE html>
<html>
<head>
<style>
.alignleft {
float: left;
}
.alignright {
float: right;
}
.even-boxes,
.odd-boxes {
height : 52px;
width : 430px;
padding-left : 20px;
display : table-cell;
vertical-align : middle;
}
.odd-boxes {
background-color:#FFCCCC;
}
.even-boxes {
background-color:#CCEBFF;
}
.surname-entry {
font-size: 25px;
font-family:"Verdana";
}
.name-entry {
font-size: 18px;
font-family:"Verdana";
}
.another-entry {
font-size: 14px;
font-family:"Verdana";
}
.number-entry {
font-size: 32px;
font-family:"Verdana";
}
</style>
</head>
<body>
<div class="odd-boxes">
<div>
<span class="surname-entry">ABCDEFGH<span>,</span></span>
<span class="name-entry"> PQRSTU</span>
<span class="number-entry alignright" style="margin-right:20px">K</span>
</div>
</div>
<div class="even-boxes">
<div>
<span class="surname-entry">ABCDEFGH<span>,</span></span>
<span class="name-entry"> PQRSTU</span>
<span class="number-entry alignright" style="margin-right:20px">K</span>
<div class="another-entry">[1234567890101]</div>
</div>
</div>
</body>
</html>
And here is another way to align text vertically, this solution will work for a single line and multiple lines of text, but still requires a fixed height container:
<div>
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
</div>
The CSS just sizes the <div>, then vertically center aligns the <span> by setting the <div>'s line-height equal to its height, and making the <span> an inline-block with vertical-align: center. Then it sets the line-height back to normal for the <span> so its contents will flow naturally inside the block.
div {
width: 250px;
height: 100px;
line-height: 100px;
text-align: center;
}
span {
display: inline-block;
vertical-align: middle;
line-height: normal;
}
Demo Link
http://jsfiddle.net/CtH9k/
I misunderstood you earlier, try this again. If you are trying to vertically align elements
The span element must be moved out of the parent div hierarchy
<div>
<span class="surname-entry">ABCDEFGH<span>,</span></span>
<span class="name-entry"> PQRSTU</span>
<div class="another-entry">[1234567890101]</div>
</div>
<span class="number-entry">K</span>
You need to add in additional css, the crucial one is display:inline-block to vertically align your inner elements
.odd-boxes, .even-boxes{
position:relative;
}
.odd-boxes>span, .even-boxes>span{
position:absolute;
right:20px;
top:0;
bottom:0;
margin:auto;
vertical-align:middle;
height:39px;/*height need to be specified*/
}
Also I've modified some of your css, you can refer to my version below:
http://codepen.io/vincentccw/pen/vOJVbX