I have written the following HTML trying to center two div's next to each other.
<div id='wrapper' style='text-align:center;'>
<div style='float:left;'>
Lorem ipsum<br />
dolor sit amet
</div>
<div style='float:left;'>
Lorem ipsum<br />
dolor sit amet
</div>
</div>
However, the code I've written results in the two div's floating all the way to the left. What this does do correctly is float the two div's side by side.
What do I need to change to center the two div's side by side?
Instead of using float: left, use display: inline-block:
<div id='wrapper' style='text-align: center;'>
<div style='display: inline-block; vertical-align: top;'>
Lorem ipsum<br />
dolor sit amet,<br />
consectetur adipisicing elit
</div>
<div style='display: inline-block; vertical-align: top;'>
Lorem ipsum<br />
dolor sit amet
</div>
</div>
The top of each inner div is kept aligned by using vertical-align: top.
Example: http://jsfiddle.net/hCV8f/1/
You will have to automatically set the margin and probably a specific width to your wrapper div
<div id="wrapper"></div>
In your CSS:
#wrapper {
width: 70%;
margin: 0 auto;
}
Try this:
<div id='wrapper' style='text-align:center;'>
<div style='float:left;background-color:red;width:50%'>
Lorem ipsum<br />dolor sit amet
</div>
<div style='float:right;background-color:blue;width:50%'>
Lorem ipsum<br />dolor sit amet
</div>
</div>
http://jsfiddle.net/JDAyt/
Do you know the width of both divs in advance? If so, you can just do something like
<div class="wrapper" style="margin: 0 auto; width: 200px">
<div class="inner1" style="width: 100px; float:left;"></div>
<div class="inner2" style="width: 100px; margin-left: 100px"></div>
</div>
Below worked for me
<div id='wrapper'>
<div class='inner'>
content 1
</div>
<div class='inner'>
content 2
</div>
</div>
CSS:
#wrapper
{
text-align: center;width:auto;margin:0 auto
}
.inner
{
display:inline-block;
}
For the left div, set the left margin. For the right div, set the right. Like this:
#leftDiv {
margin-left: auto;
}
#rightDiv {
margin-right: auto;
}
This puts them back to back in the center of the screen.
Below code works fine with Zebra GC420d Printer:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8">
<style type="text/css">
html, body { padding: 0px; margin: 0px; width: 100%; height: 100%; }
#div { min-height: 100%; }
</style>
</head>
<body>
<div style="border: 0px solid red;">
<table border="0" width="100%" align="center">
<tr>
<td style="text-align: center;">
<?php
echo $name;
?>
</td>
</tr>
<tr><td></td></tr>
<tr>
<td style="text-align: center;">
<?php
echo 'https://goo.gl/2QvRXf';
?>
</td>
</tr>
</table>
</div>
</body>
</html>
Hope it helps !
Related
I have a td with a div with some text. The div shall have 100% of the height and width of the td, and the text shall be centered both vertically and horizontally. I sometimes want to format the text in the div using spans, and it can happen that the text is too long so it will be in multiple lines.
I tried using a flexbox, but that made the text make line breaks whenever there was a span. Also tried to put the div in a div, and only use the flexbox on the parent div, but that also didn't work. I've also tried to set the div to "display: table-cell", but this made the div not able to fill the entire cell. So now I really don't know what to try.
Table cell:
td {
border: 1px solid #d9d9d9;
height: 16pt;
padding: 0;
min-width: 100px;
}
Div with text in the cell:
.cellText {
height: 100%;
text-align: center;
vertical-align: middle;
}
Add the following lines of code to your .cellText CSS class:
display: flex;
align-items: center;
justify-content: center;
Then add a div element inside your .cellText instances and put your text content there.
Example
td {
border: 1px solid #d9d9d9;
height: 16pt;
padding: 0;
min-width: 100px;
}
.cellText {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
text-align: center;
vertical-align: middle;
}
/* For testing purposes */
td {
width: 500px;
height: 150px;
}
<table style="width:350px">
<tr>
<th>Title</th>
<th>Title</th>
</tr>
<tr>
<td>
<div class="cellText">
<div>
<span>First span</span> <span>Second span</span> <span>Third span</span> <span>Fourth span</span>
</div>
</div>
</td>
<td>
<div class="cellText">
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit..
</div>
</div>
</td>
</tr>
<tr>
<td>
<div class="cellText">
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum commodo, purus ac vestibulum dapibus.
</div>
</div>
</td>
<td>
<div class="cellText">
<div>
Lorem ipsum dolor sit amet.
</div>
</div>
</td>
</tr>
</table>
I was trying to make my code side by side but it seems like the odds aren't in my favor with this. I'm having trouble with making them side by side. Here is the code that I use:
<div class="column" style="box-sizing:border-box;text-align:center;float:left;width:33.33%;padding-top:10px;padding-bottom:10px;padding-right:10px;padding-left:10px;height:300px;" >
<h2 style="box-sizing:border-box;font-size:50px;color:#fa4616;" >5</h2>
<p style="box-sizing:border-box;font-size:20px;color:#fa4616;" >Lorem Ipsum</p>
<p style="box-sizing:border-box;font-size:20px;color:#fa4616;" >Dolor Sit Amet</p>
</div>
<div class="column" style="box-sizing:border-box;text-align:center;float:left;width:33.33%;padding-top:10px;padding-bottom:10px;padding-right:10px;padding-left:10px;height:300px;" >
<h2 style="box-sizing:border-box;font-size:50px;color:#fa4616;" >40</h2>
<p style="box-sizing:border-box;font-size:20px;color:#fa4616;" >Lorem Ipsum</p>
<p style="box-sizing:border-box;font-size:20px;color:#fa4616;" >Dolor Sit Amet</p>
</div>
<div class="column" style="box-sizing:border-box;text-align:center;float:left;width:33.33%;padding-top:10px;padding-bottom:10px;padding-right:10px;padding-left:10px;height:300px;" >
<h2 style="box-sizing:border-box;font-size:50px;color:#fa4616;" >90</h2>
<p style="box-sizing:border-box;font-size:20px;color:#fa4616;" >Lorem Ipsum</p>
<p style="box-sizing:border-box;font-size:20px;color:#fa4616;" >Dolor Sit Amet</p>
</div>
</div>
When I try it live, it only appears to be on the bottom of the number and not on the side of the text. I tried making it as a 6 column layout but it looked terrible than this one, I also tried adding a floating box but it didn't work as well.
Here is what I am trying to achieve: what I'm trying to achieve
Am I missing anything? Thanks a lot in advance.
With a little help from CSS flexbox, relative units, and a liittle more structure to the HTML, you can get your desired result:
.columns {
display: flex;
flex-direction: row;
justify-content: space-evenly;
width: 100vw;
margin: auto;
}
.column {
display: flex;
flex-direction: row;
align-items: center;
}
.big-num {
font-size: 10vw;
}
.text-container {
line-height: 0;
margin-left: 2.5vw;
}
.text {
font-size: 1.75vw;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="index.css">
</head>
<body>
<div class="columns">
<div class="column" >
<h2 class="big-num">5</h2>
<div class="text-container">
<p class="text">Lorem Ipsum</p>
<p class="text">Dolor Sit Amet</p>
</div>
</div>
<div class="column">
<h2 class="big-num">40</h2>
<div class="text-container">
<p class="text">Lorem Ipsum</p>
<p class="text">Dolor Sit Amet</p>
</div>
</div>
<div class="column">
<h2 class="big-num">90</h2>
<div class="text-container">
<p class="text">Lorem Ipsum</p>
<p class="text">Dolor Sit Amet</p>
</div>
</div>
</div>
</div>
</body>
</html>
Add in the rest of your styles as you see fit. But it's best practice to use a separate css file and have all your styles included there instead of placing them on each HTML element.
How can i make my div background height at 100% depending on the height of it parent :
that's what i have for now :
and i want to fill all the space with the red color with the background color:
this is my HTML code :
<div class="row" style="margin-bottom: 20px">
<div class="col-6"><img style="width: 100%" src="https://cdn.pixabay.com/photo/2016/09/01/10/23/image-1635747_960_720.jpg"></div>
<div class="col-6 class1">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</p>
</div>
</div>
<div class="row">
<div class="col-12">
<img src="https://cdn.pixabay.com/photo/2016/09/01/10/23/image-1635747_960_720.jpg" style="width:100%">
</div>
</div>
and that's my css :
.class1{
background-color: yellow;
height: 100%;
}
and thanks for help :-)
Please refer to below link:
https://jsfiddle.net/ulric_469/7mh4vs6p/6/
add height 100% to the image
.row {
display: flex;
align-items: stretch;
}
.row > div {
flex: 1
}
I am attempting to show a thumbnail picture and below the thumbnail, I want to have some text. Ideally I think I want to wrap the image and the text in a div whose style is set to be inline.
So imagine 3 pictures going across the screen from left to right and underneath each picture is a description of the picture.
How do I accomplish that?
Im with seb nukem here. I would use display inline-block.
One way you could do this is by enclosing each image and description pair within a div element and then just floating those divs to the left.
DEMO: http://codepen.io/sajadtorkamani/pen/xbbrzE
HTML
<div class="gallery">
<div>
<img src="http://placehold.it/300x200" />
<p>Description goes here...</p>
</div>
<div>
<img src="http://placehold.it/300x200" />
<p>Description goes here...</p>
</div>
<div>
<img src="http://placehold.it/300x200" />
<p>Description goes here...</p>
</div>
</div>
CSS
.gallery div {
float: left;
margin-right: 1em;
}
Put each image + caption within an inline or floating block:
CSS
div.image {
display:inline-block; /* or use float:left; */
}
.caption {
}
HTML
<div class="image"><!-- one div per image -->
<img src="image.png">
<div class="caption">Caption text here</div>
</div>
<div class="image">
<img src="image2.png">
<div class="caption">Caption text here</div>
</div>
...
demo: http://jsfiddle.net/5s5s4otc/
I would use the HTML <table> element. Try something like this:
table {
width: 100%;
}
td {
text-align: center;
}
<table>
<tr>
<td>
<img src="http://placekitten.com/g/200/300" />
</td>
<td>
<img src="http://placekitten.com/g/200/300" />
</td>
<td>
<img src="http://placekitten.com/g/200/300" />
</td>
</tr>
<tr>
<td>Description goes here.</td>
<td>Description goes here.</td>
<td>Description goes here.</td>
</tr>
</table>
I hope this helps! Leave a comment below if you need additional help.
DEMO: http://jsfiddle.net/pwee167/67oc6k7r/\
The outcome will be something like this:
HTML:
<div class="container">
<img src="http://png-1.findicons.com/files/icons/85/kids/128/thumbnail.png"/>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
</div>
<div class="container">
<img src="http://png-1.findicons.com/files/icons/85/kids/128/thumbnail.png"/>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
</div>
<div class="container">
<img src="http://png-1.findicons.com/files/icons/85/kids/128/thumbnail.png"/>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
</div>
CSS:
.container
{
float: left;
max-width: 128px;
}
Note: I assumed the dimensions of your thumbnails will be the same (as is in most use cases of thumbnails), which allowed me to set the maximum width (using max-width) of the container holding the image and the description. This will prevent the text from overflowing, and expanding the container.
Use either float or inline-block on the container divs. See jFiddle here: http://jsfiddle.net/ckk2jprr/
HTML
<div>
<div class="pic">
<img src="http://barkpost-assets.s3.amazonaws.com/wp-content/uploads/2013/11/grumpy-dog-11.jpg" />
<div>This is some text</div>
</div>
<div class="pic">
<img src="http://barkpost-assets.s3.amazonaws.com/wp-content/uploads/2013/11/grumpy-dog-11.jpg" />
<div>This is some text</div>
</div>
<div class="pic">
<img src="http://barkpost-assets.s3.amazonaws.com/wp-content/uploads/2013/11/grumpy-dog-11.jpg" />
<div>This is some text</div>
</div>
</div>
CSS
.pic{
float: left;
}
I want to center an floated image and a container (paragraph + heading):
.row {
display: block;
/* width: 100%; */
}
.left {
float: left;
}
.right {
float: right;
}
<div class="row">
<div class="container">
<img class="right" src="" width="300" height="300" />
<h1>Heading</h1>
<p>Lorem ipsum dolor sit amet</p>
<div style="clear: both"></div>
</div>
</div>
<div class="row">
<div class="container">
<img class="left" src="" width="300" height="156" />
<h1>Heading</h1>
<p>Lorem ipsum dolor sit amet</p>
<div style="clear: both"></div>
</div>
</div>
Here is also a live version of the problem. I have cleared the floats but now I can't center the .img and .container element. What would you slove the problem?
You have no luck with floated elements since they don't obey vertical-align. You can instead use display: table-cell along with vertical-align: middle and that would work perfectly. Albeit you will need to modify your HTML structure a little bit to place the content first before the image and vice versa depending on the way you want the content and images to appear on the front-end.
.container {
display: table;
}
.content {
width: 50%;
display: table-cell;
vertical-align: middle;
}
.image {
width: 50%;
display: table-cell;
vertical-align: middle;
}
.image img {
width: 100%;
}
<div class="row">
<div class="container">
<div class="content">
<h1>Heading</h1>
<p>Lorem ipsum dolor sit amet</p>
</div>
<div class="image">
<img src="http://dev.dashbox.si/media/wysiwyg/vsebina-dashboxa.jpg" />
</div>
</div>
</div>
<div class="row">
<div class="container">
<div class="image">
<img src="http://dev.dashbox.si/media/wysiwyg/vsebina-dashboxa.jpg" />
</div>
<div class="content">
<h1>Heading</h1>
<p>Lorem ipsum dolor sit amet</p>
</div>
</div>
</div>
Basically what you can do to vertically align text is change the display of the container to table then the paragraph to table-cell and then set the vertical-align to middle looking like this:
.row {
display: table;
overflow: hidden;
}
.left, .right {
display: table-cell;
vertical-align: middle;
}
You might also need to set overflow to hidden on the container so that the height is maintained because of the floats.