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>
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:
Why does my header moves down when I set it fixed?
(1 answer)
Why aren't my absolutely/fixed-positioned elements located where I expect?
(3 answers)
Closed 2 years ago.
body {
background-color:whitesmoke
}
.fixed {
background-color:gray;
position: fixed;
}
<body>
<div class="fixed">
<h1>header data</h1>
</div>
<div style="margin-top: 60px;">
<h1>hello how are you</h1>
</div>
</body>
I have this code inside my body and first div inside the body which has fixed position but it starts by giving the margin 60 from the top which is given in the second div. As the fixed position always takes position with respect to document, then why it is taking the margin of the second div.
Just specify the position of the fixeddiv, if not it get (wrongly) inferred.
Adding top: 0 will set the fixed div to the top of the screen.
<div style=" position: fixed; background-color: aqua; top: 0;">
<h1 >header data</h1>
</div>
<div style="background-color: aliceblue;">
<div style="margin-top: 60px;">
<h1>hello how are you</h1>
</div>
</div>
Edit
As stated in documentation (bold added):
The element is removed from the normal document flow, and no space is created for the element in the page layout. It is positioned relative to the initial containing block established by the viewport, except when one of its ancestors has a transform, perspective, or filter property set to something other than none [...]
And as CBroe pointed out, for margin collapsing:
If there is no border, padding, inline content, height, or min-height to separate a block's margin-top from its margin-bottom, then its top and bottom margins collapse.
You can see the difference between this two snippets: the first creates a non-empty, 1px block that contains the fixed element, while the other creates an empty block, causing margins to collapse.
<div style="display: block; height: 1px;">
<div style=" position: fixed; background-color: aqua;">
<h1 >header data</h1>
</div>
</div>
<div style="margin-top: 60px; background-color: aliceblue;">
<h1>hello how are you</h1>
</div>
Another solution will be to use padding instead of margin, in order to avoid the collpasing to trigger:
<div style="display: block; height: 0px;">
<div style=" position: fixed; background-color: aqua;">
<h1 >header data</h1>
</div>
</div>
<div style="margin-top: 60px; background-color: aliceblue;">
<h1>hello how are you</h1>
</div>
<div style=" position: fixed; background-color: aqua;">
<h1 >header data</h1>
</div>
<div style=" padding-top: 60px;">
<div style="background-color: aliceblue;">
<h1>hello how are you</h1>
</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:
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..!!
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