This question already has answers here:
How can I vertically center a div element for all browsers using CSS?
(48 answers)
Closed last year.
I am trying to align a span vertically centered. But its not working.
Here is my code:
<div style="height:150px; width:100%;">
<div style="height:150px;width:150px;;background-color:blue;display: inline-block;">
<!-- <div class="text-center" style="float:center;">-->
<img style="width:100%;float:left;height:100%;" t-att-src="'data:image/png;base64,%s' % to_text(o.company_id.header_image)" />
<!-- </div>-->
</div>
<div style="height:150px;width:400px;float:right;background-color:red;display: inline-block;">
<!-- <div class="text-center" style="float:center;">-->
<span style="font-size:40px;vertical-align:middle;padding-top:70% !important;padding-left:16%;"><b>Purchase Order</b></span>
<!-- </div>-->
</div>
</div>
Actually, i am converting above code to pdf instead html rendering using wkhtmltopdf.
Use display:flex;, align-items:center; on parent div and display:inline-block; on span element to make it an actual block element.
<div style="height:150px; width:100%;">
<div style="height:150px;width:150px;;background-color:blue;display: inline-block;">
<img style="width:100%;float:left;height:100%;" t-att-src="'data:image/png;base64,%s' % to_text(o.company_id.header_image)" />
</div>
<div style="height:150px;width:400px;float:right;background-color:red;display: flex;align-items:center;">
<span style="display:inline-block;font-size:40px;vertical-align:middle;padding-left:16%;"><b>Purchase Order</b></span>
</div>
</div>
Related
This question already has answers here:
CSS: align two element, to the left and right in the same line WHITHOUT floats
(3 answers)
Closed 1 year ago.
I'm trying to achieve the following:
But maintaining a specific div structure/hierarchy/order:
<div>
<div>
<h3>TITLE</h3>
<p>LEGEND</p>
</div>
<div>
<i>BUTTON</i>
</div>
</div>
Tried with position relative float right and display inline, but to no success.
Here are the attempts:
https://jsfiddle.net/xzmf8753/
<div style="background-color: red; position: relative">
<div style="position: relative; display: inline;">
<h3>TITLE</h3>
<p style="display: inline;">LEGEND</p>
</div>
<div style="position: absolute;top: 0;right: 0;">
<i>BUTTON</i>
</div>
</div>
This question already has answers here:
placing a <p> beside a centered <h1>
(3 answers)
Closed 5 years ago.
I am using bootstrap 4 to come up with a div that would contain an <h1> aligned to the center while a <p> tag aligned to the right. Here is exactly what I am trying to achieve:
http://imgur.com/a/8u5MD
I would prefer a method using the bootstrap 4 classes or flexbox rather than using any floats. Here is the code I have written so far:
<div class="row">
<div class="col-sm-12 p-20">
<h1 class="heading-font px36-font d-inline-block">.Hay<span class="skyblue">ford</span></h1>
<p class="d-inline-block special-font b-900"><i class="fa fa-phone"></i> +92-336-54-14-994</p>
</div>
</div>
h1 {
text-align: center;
}
p {
text-align: right;
}
<div class="row">
<div class="col-sm-12 p-20">
<h1 class="heading-font px36-font d-inline-block">.Hay<span class="skyblue">ford</span></h1>
<p class="d-inline-block special-font b-900"><i class="fa fa-phone"></i> +92-336-54-14-994</p>
</div>
</div>
Just dividing the main div into 2 sub divs
<div class="row">
<div class="col-sm-12 p-20">
<div style="width: 80%; float:left">
<center><h1 class="heading-font px36-font d-inline-block">.Hay<span class="skyblue">ford</span></h1></center>
</div>
<div style="width: 20%; float:right">
<p class="d-inline-block special-font b-900"><i class="fa fa-phone"></i> +92-336-54-14-994</p></div>
</div>
</div>
For the h1 you can add a class called "text-center".
For the parent div "p-20" make it relative.
Now,
Position the p tag as absolute and control it using right: 5px;, top: 5px;.
Hope this works, do vote if it was help full.
Thank you..!!
I have 4 image div at the moment . And i want them to start aligning from the center . So that if anyone add more image div future it automatically align to the center.
Is it possible ?
use grid template provided by bootstrap and set the parent as container.
HTML
<div class="container">
<div class="col-md-3">
<img src="https://pmcvariety.files.wordpress.com/2016/11/beauty-and-the-beast-trailer.jpg?w=1000&h=563&crop=1" alt="disney">
</div>
<div class="col-md-3">
<img src="https://pmcvariety.files.wordpress.com/2016/11/beauty-and-the-beast-trailer.jpg?w=1000&h=563&crop=1" alt="disney">
</div>
<div class="col-md-3">
<img src="https://pmcvariety.files.wordpress.com/2016/11/beauty-and-the-beast-trailer.jpg?w=1000&h=563&crop=1" alt="disney">
</div>
<div class="col-md-3">
<img src="https://pmcvariety.files.wordpress.com/2016/11/beauty-and-the-beast-trailer.jpg?w=1000&h=563&crop=1" alt="disney">
</div>
</div>
As I understand this is what you want?
Full Layout
Yes, it is possible just you can try below code.
<div class ='container'>
<div class ='container-inner'>
<div class ='image'>
<img src=''>
</div>
<div class ='image'>
<img src=''>
</div>
<div class ='image'>
<img src=''>
</div>
</div>
</div>
<style>
.container{
width:100%:;
}
.container -inner{
display: table;
margin:auto;
}
.image{
float : left;
}
</style>
Above code helps you to put all image container to center.
If you add single image to it it take only that width which is image width and align center, if more images take width according as align center.
This question already has answers here:
Make a div into a link
(30 answers)
Closed 8 years ago.
How do I make my entire pad div area a hyperlink?
http://jsfiddle.net/obxh7qpn/
Here's my HTML:
<div class="pad">
<div href="http://www.google.com" style="height:286px;width:286px;background:url('http://placehold.it/1x1') top center no-repeat;background-size:cover">
<div>
<span>View all</span>
</div>
</div>
</div>
<a href='http://www.google.com'>
<div class="pad">
<div style="height:286px;width:286px;background:url('http://placehold.it/1x1') top center no-repeat;background-size:cover">
<div>
<span>View all</span>
</div>
</div>
</div>
</a>
wrap a tag around the whole thing!
Use "onclick=" event instead of href
<div onclick="document.location='http://www.google.com'> ...
I have a divider that is centered in the page using margin:auto. Inside I have two more dividers (can't be combined, must be a divider nested in a divider) when I try to center something inside of this it does not center it in the center of the page. I'm assuming it has to do with the padding-left and padding-right that I've added...
Any insight?
Here's my code:
<center>
<div style="margin:auto; width:80%;">
<div style="width:50%; padding-left:20%; padding-right:20%;">
<div style="width:inherit; position:absolute; bottom:0%;">
<hr />
test
<hr />
<br><br><br>
</div>
</div>
</div>
</center>
Just remove the center tag:
<div style="margin:auto; width:80%;">
<div style="width:50%; padding-left:20%; padding-right:20%;">
<div style="width:inherit; position:absolute; bottom:0%;">
<hr />
test
<hr />
<br><br><br>
</div>
</div>
</div>
Check it out here: http://jsfiddle.net/V8qMm/