This question already has answers here:
How to center an element horizontally and vertically
(27 answers)
Closed 6 years ago.
I want to center a div in the exact center of the page with CSS, now before you guys actually suggest me some of the google results, I know they don't work
This one for example:
top: 50%;
left: 50%;
This doesn't center a div, it centers it + the width + the height. How can I exactly center it in the middle? Here is my div:
<div class="notification-instance ui-draggable ui-draggable-handle" style="width:33.333333333333336%;position:absolute;top:50%;left:50%;margin:0 auto;">
<div class="draggable panel panel-pink">
<div class="panel-heading" style="background-color: #B00049">
Panel Title
</div>
<div class="panel-body">
Panel Body
</div>
</div>
</div>
I also cannot use col-md with bootstrap so that's out of the queston.
I also don't know the width or height of my div as it's passed via a parametrer
Use transform:translate(-50%,-50%);
<div class="notification-instance ui-draggable ui-draggable-handle" style="width:33.333333333333336%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:#fff;">
<div class="draggable panel panel-pink">
<div class="panel-heading" style="background-color: #B00049">
Panel Title
</div>
<div class="panel-body">
Panel Body
</div>
</div>
</div>
Demo is here
Related
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>
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:
How to position text over an image with CSS
(8 answers)
Closed 3 years ago.
I have 3 images on my home page,I need text in top of each images,so how to add text over image
<div class="container">
<h2 class="section-title">
My clasess
</h2>
<div class="owl-carousel visit-carousel">
<div class="item">
</div>
<div class="item">
</div>
<div class="item">
</div>
</div>
</div>
have the text inside of a div, and use the div as your image using css. background-image option, and inside the div insert your text.
Html
<div class="image-box">
<h2>Text Inside</h2>
</div>
css
.image-box {
background-color: #ccc;
height: 200px;
width: 200px;
}
This question already has answers here:
Why is there vertical scroll on the main container?
(4 answers)
Closed 5 years ago.
I am creating a row of <div> elements using the following code:
HTML:
.row_1_element{
text-align:center;
font-size:3vw;
width:20vw;
float:left;
}
<div id="row_1">
<div class="row_1_element">
Menu
</div>
<div class="row_1_element">
user
</div>
<div class="row_1_element">
profile
</div>
<div class="row_1_element">
?
</div>
<div class="row_1_element">
?
</div>
<div>
The problem is that all 5 <div> elements do not fit into one row across the screen, instead 4 fit and the 5th goes to the next row. This makes little sense if 1vw is 1/100 of the viewport width, since 5 *(20/100) = 100/100 viewport width. Therefore there should be enough space for all 5 of them to fit.
You must remove the default margins from the page if your content spans the entire 100%:
body {
margin: 0;
}
.row_1_element {
text-align:center;
font-size:3vw;
width:20vw;
float:left;
}
<div id="row_1">
<div class="row_1_element">
Menu
</div>
<div class="row_1_element">
user
</div>
<div class="row_1_element">
profile
</div>
<div class="row_1_element">
?
</div>
<div class="row_1_element">
?
</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..!!