I have inline-block elements. These are glyphs and can contain SVG content, but don't contain text.
The problem is that these elements don't line up with text:
.example {
line-height: 32px;
margin: 12px 0;
}
.wrapper {
display: inline-block;
height: 24px;
width: 24px;
position: relative;
background-color: red;
}
.wrapper > .content {
position: absolute;
bottom: 3px;
right: 3px;
height: 12px;
width: 12px;
background-color: blue;
}
<div class=example>
<div class=wrapper>
<div class=content>
</div>
</div>
not aligned with text
<div class=wrapper>
<div class=content>
</div>
</div>
</div>
I can shift down individual elements easily enough, but it's messy and requires lots of micro tweaking.
I can't rely on the line height and icon size being identical, and the SVG inside are overlaid, which requires absolute positioning.
Is there a way to make these consistently vertically centre with text?
Specify vertical-align:bottom to wrapper class :
.example {
line-height: 24px;
margin: 12px 0;
}
.wrapper {
display: inline-block;
height: 24px;
width: 24px;
position: relative;
background-color: red;
vertical-align:bottom;
}
.wrapper > .content {
position: absolute;
bottom: 3px;
right: 3px;
height: 12px;
width: 12px;
background-color: blue;
}
<div class=example>
<div class=wrapper>
<div class=content>
</div>
</div>
aligned with text
<div class=wrapper>
<div class=content>
</div>
</div>
</div>
Related
I have an image and text on it in two different divs with a background color,
text in one div is long and in the second div is short but the width of both divs are equal that is I don't want.
Here is my code:
.banner{
position: relative;
}
.banner img{
width: 100%;
}
.image-text{
position: absolute;
top: 40%;
left: 8%;
}
.image-text h2{
font-size: 22px;
font-weight: bolder;
color: #fff;
margin: 0px;
}
.upper-text{
background: #2b96c3;
padding: 5px 10px;
}
.lower-text{
background: #0d729c;
padding: 5px 10px;
}
<section>
<div class="banner">
<img src="https://i.imgur.com/xTeFbiv.jpg">
<div class="image-text">
<div class="upper-text">
<h2>Excellent Successfull</h2>
</div>
<div class="lower-text">
<h2>Sustainable</h2>
</div>
</div>
</div>
</section>
All I need is like in the picture attached desired output:
.
I tried many tricks but not understand how to do this.
Make the display of the second div inline-block so it doesn't span 100% width.
Heres an example:
.banner{
position: relative;
}
.banner img{
width: 100%;
}
.image-text{
position: absolute;
top: 40%;
left: 8%;
}
.image-text h2{
font-size: 22px;
font-weight: bolder;
color: #fff;
margin: 0px;
}
.upper-text{
background: #2b96c3;
padding: 5px 10px;
}
.lower-text{
background: #0d729c;
padding: 5px 10px;
display: inline-block;
}
<section>
<div class="banner">
<img src="https://i.imgur.com/xTeFbiv.jpg">
<div class="image-text">
<div class="upper-text">
<h2>Excellent Successfull</h2>
</div>
<div class="lower-text">
<h2>Sustainable</h2>
</div>
</div>
</div>
</section>
First of all, here a link to my CodePen: https://codepen.io/mikaelssol/pen/qrvRKL
As you can see in the link above, I have three <div id="menu"> elements with "maroon" as background color. They are:
1) <div id="menu">Fish</div>
2) <div id="menu">Chicken</div>
3) <div id="menu">Beef</div>
The <div id="menu"> elements are target with the following CSS:
div#menu {
width: 150px;
height: 90px;
background: blue;
position: absolute;
top: 0;
right: 0;
}
I also have three <p> elements each of them target with the following CSS:
p {
border: 1px solid black;
background-color: #A52A2A;
width: 90%;
height: 150px;
margin-right: auto;
margin-left: auto;
font-family: Helvetica;
color: white;
position: relative;
}
The end result I've trying to achieve is to have the three <div> elements in blue color positioned 0px from top and from right, perfectly aligned to the top-right border of the <p> elements in maroon color. Both elements have to have the same position regardless of the size of the screen of the device or the size of the browser window. All three <p> must be aligned in the center of the page with their <div> elements aligned to the top-right border.
The result I was able to get so far is the <div> elements getting aligned to the HTML document instead of to the <p> elements. I managed to work with media queries and everything very well but the positioning of those elements is giving me a hard time. Any help is very helpful.
I did it like so: (sorry if this conflicts with your bootstrap styles)
https://codepen.io/StefanBobrowski/pen/aJMrrw
HTML
<div class="menu-box-container">
<div class="menu-box">
<p>Item 1</p>
<div class="item-box">Fish</div>
</div>
<div class="menu-box">
<p>Item 2</p>
<div class="item-box">Chicken</div>
</div>
<div class="menu-box">
<p>Item 3</p>
<div class="item-box">Beef</div>
</div>
</div>
CSS
.menu-box-container {
display: flex;
}
.menu-box {
width: 170px;
height: 110px;
padding: 20px;
position: relative;
border: 1px solid green;
}
.menu-box p {
width: 100%;
height: 100%;
margin: 0;
color: #fff;
background-color: maroon;
}
.item-box {
display: block;
padding: 20px;
position: absolute;
top: 20px;
right: 20px;
background-color: blue;
}
It appears as if there is padding between two of my elements - content1 and footer. I do not want this 'padding' but I cannot understand why it is there at all. Here is part of problematic html text on its own - the 'padding' still appears. I've tried adding in padding: 0 and margin: 0 to both the elements with no result.
<style type="text/css">
body{
margin: 0;
}
.footer{
position: relative;
width: 100%;
min-width: 512px;
height: 150px;
background-color: black;
font-size: 12px;
font-family: arial;
color: gray;
z-index: 5;
}
.content1{
position: relative;
width: 100%;
height: 300px;
background-color: #E6E6E6;
z-index: 5;
}
.imagecontainer{
height: 80%;
float: right;
}
.image{
position: relative;
display: block;
height: 100%;
}
</style>
<body>
<div class="content1">
<!--<div class="textcontainer">
<p style="color: gray; font-size: 15px; font-family: arial;">this is some text</p>
</div>-->
<div class="imagecontainer">
<img class="image" src="C:\Users\wrigh\Pictures\SWITCH\capture01.png"></img>
</div>
</div>
<div class="footer">
<center><p style="padding-top:50px; max-width: 50%;">ONLY AVAILIBLE ON ANDROID<br><br>UPDATE: NO CURRENT WORK IS SCHEDULED</p></center>
</div>
</body>
In response to the proposed answer to this question. I have removed the image from the text and unfortunately the 'padding' was not removed.
It seems that your paragraph tag has a margin.
Apply this css rule:
.footer p {
margin: 0;
}
Here is a fiddle
You have encountered collapsing margins.
When elements have top or bottom margin, and the parent element doesn't have a border or padding, the margins collapes. The effect is that the margin is visible outside the parent element, not between the parent element boundaries and the child element.
It's the margin of the p element in the footer that is collapsing. It creates the distance between the content1 and the footer element.
By removing the margin on the p element, you get rid of the distance:
.footer p {
margin: 0;
}
Demo:
.footer p {
margin: 0;
}
body{
margin: 0;
}
.footer{
position: relative;
width: 100%;
min-width: 512px;
height: 150px;
background-color: black;
font-size: 12px;
font-family: arial;
color: gray;
z-index: 5;
}
.content1{
position: relative;
width: 100%;
height: 300px;
background-color: #E6E6E6;
z-index: 5;
}
.imagecontainer{
height: 80%;
float: right;
}
.image{
position: relative;
display: block;
height: 100%;
}
<div class="content1">
<!--<div class="textcontainer">
<p style="color: gray; font-size: 15px; font-family: arial;">this is some text</p>
</div>-->
<div class="imagecontainer">
<img class="image" src="C:\Users\wrigh\Pictures\SWITCH\capture01.png"></img>
</div>
</div>
<div class="footer">
<center><p style="padding-top:50px; max-width: 50%;">ONLY AVAILIBLE ON ANDROID<br><br>UPDATE: NO CURRENT WORK IS SCHEDULED</p></center>
</div>
if you want, you can always CSS your way through it, something like
* { margin:0; padding:0; }
It should reset All elements, after that you define new paddings and margins, which is much easier ;)
Your using a <center> tag if your using HTML5 it's not supported... if your not using HTML5 the <center> tag is a block element, add display: inline-block in the css.
I need your help,
How would I go about amending the HTML or CSS markup below to have the text that is in my custom dialog box, to be vertically centered in the white space. Here is a snapshot of the problem:
and the expected result:
Here is the CSS:
#wrapper {
height: 100px;
width: 500px;
bottom: 50%;
right: 50%;
position: absolute;
}
#container {
background: #FFF;
left: 50%;
padding: 10px;
top: 50%;
margin: 0;
padding: 0;
height: 100%;
border: 2px solid rgb(100,139,170);
height: 100%;
position: relative;
}
.topbar {
cursor: pointer;
color: white;
background: rgb(100,139,170);
padding: 4px;
font-weight: bold;
}
#Text {
width: 100%;
height: 100%;
text-align: center;
}
Here is the HTML:
<div id="wrapper">
<div id="container">
<div style="float:left;" class="topbar">Custom Dialog Box</div><div class="topbar" style="text-align: right;">Close</div>
<div id="Text">This is some sample text that will appear here</div>
</div>
</div>
Fiddle is: https://jsfiddle.net/vc5xL1vy/
You are going to need to set the container to display: table; and set all its children to display: table-cell but the table header to display: table-caption. I have made a few other modification to your header to a single div wrapper. JSFiddle: https://jsfiddle.net/1s45cdvs/1/
CSS
#wrapper {
height: 100px;
width: 500px;
bottom: 50%;
right: 50%;
position: absolute;
}
#container {
background: #FFF;
left: 50%;
padding: 10px;
top: 50%;
margin: 0;
padding: 0;
height: 100%;
border: 2px solid rgb(100,139,170);
height: 100%;
position: relative;
display:table;
}
.topbar {
cursor: pointer;
color: white;
background: rgb(100,139,170);
padding: 4px;
font-weight: bold;
display: table-caption;
}
#Text {
text-align: center;
display: table-cell;
vertical-align: middle;
}
HTML
<div id="wrapper">
<div id="container">
<div class="topbar">
<div style="float:left;" >Custom Dialog Box</div><div style="text-align: right;">Close</div>
</div>
<div id="Text">This is some sample text that will appear here</div>
</div>
</div>
There's multiple ways to do this but they all require you to set a pixel value for something. Padding, line-height, etc...
You can set the container display as table-cell to act like a table element would, then set width and height of the text container so that the element knows where the middle is. Using % never works for vertical aligning. Pain in the CSS.
#Text {
width: 500px;
height: 75px;
text-align: center;
display: table-cell;
vertical-align: middle;
}
https://jsfiddle.net/bgbfpbta/
How do I center a text over an image in css?
<div class="image">
<img src="sample.png"/>
<div class="text">
<h2>Some text</h2>
</div>
</div>
I want to do something like the one below but I'm having difficulties, here's my current css
<style>
.image {
position: relative;
}
h2 {
position: absolute;
top: 200px;
left: 0;
width: 100%;
margin: 0 auto;
width: 300px;
height: 50px;
}
</style>
When I use background-image I do not get any output from html2pdf:
<style>
#image_container{
width: 1000px;
height: 700px;
background-image:url('switch.png');
}
</style>
Print
<?php ob_start(); ?>
<div id="image_container"></div>
<?php
$_SESSION['sess'] = ob_get_contents();
ob_flush();
?>
Here's prints.php:
<?php require_once('html2pdf/html2pdf.class.php'); ?>
<?php
$html2pdf = new HTML2PDF('L', 'A4', 'en');
$html2pdf->writeHTML($_SESSION['sess']);
$html2pdf->Output('random.pdf');
?>
How about something like this: http://jsfiddle.net/EgLKV/3/
Its done by using position:absolute and z-index to place the text over the image.
#container {
height: 400px;
width: 400px;
position: relative;
}
#image {
position: absolute;
left: 0;
top: 0;
}
#text {
z-index: 100;
position: absolute;
color: white;
font-size: 24px;
font-weight: bold;
left: 150px;
top: 350px;
}
<div id="container">
<img id="image" src="http://www.noao.edu/image_gallery/images/d4/androa.jpg" />
<p id="text">
Hello World!
</p>
</div>
This is another method for working with Responsive sizes. It will keep your text centered and maintain its position within its parent. If you don't want it centered then it's even easier, just work with the absolute parameters. Keep in mind the main container is using display: inline-block. There are many others ways to do this, depending on what you're working on.
Based off of Centering the Unknown
Working codepen example here
HTML
<div class="containerBox">
<div class="text-box">
<h4>Your Text is responsive and centered</h4>
</div>
<img class="img-responsive" src="http://placehold.it/900x100"/>
</div>
CSS
.containerBox {
position: relative;
display: inline-block;
}
.text-box {
position: absolute;
height: 100%;
text-align: center;
width: 100%;
}
.text-box:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
}
h4 {
display: inline-block;
font-size: 20px; /*or whatever you want*/
color: #FFF;
}
img {
display: block;
max-width: 100%;
height: auto;
}
Why not set sample.png as background image of text or h2 css class? This will give effect as you have written over an image.
For a responsive design it is good to use a container having a relative layout and content (placed in container) having fixed layout as.
CSS Styles:
/*Centering element in a base container*/
.contianer-relative{
position: relative;
}
.content-center-text-absolute{
position: absolute;
text-align: center;
width: 100%;
height: 0%;
margin: auto;
top: 0;
left: 0;
bottom: 0;
right: 0;
z-index: 51;
}
HTML code:
<!-- Have used ionic classes -->
<div class="row">
<div class="col remove-padding contianer-relative"><!-- container with position relative -->
<div class="item item-image clear-border" ><img ng-src="img/engg-manl.png" alt="ENGINEERING MANUAL" title="ENGINEERING MANUAL" ></div> <!-- Image intended to work as a background -->
<h4 class="content-center-text-absolute white-text"><strong>ENGINEERING <br> MANUALS</strong></h4><!-- content div with position fixed -->
</div>
<div class="col remove-padding contianer-relative"><!-- container with position relative -->
<div class="item item-image clear-border"><img ng-src="img/contract-directory.png" alt="CONTRACTOR DIRECTORY" title="CONTRACTOR DIRECTORY"></div><!-- Image intended to work as a background -->
<h4 class="content-center-text-absolute white-text"><strong>CONTRACTOR <br> DIRECTORY</strong></h4><!-- content div with position fixed -->
</div>
</div>
For IONIC Grid layout, evenly spaced grid elements and the classes used in above HTML, please refer - Grid: Evenly Spaced Columns. Hope it helps you out... :)
as Harry Joy points out, set the image as the div's background and then, if you only have one line of text you can set the line-height of the text to be the same as the div height and this will place your text in the center of the div.
If you have more than one line you'll want to set the display to be table-cell and vertical-alignment to middle.
as of 2017 this is more responsive and worked for me.
This is for putting text inside vs over, like a badge.
instead of the number 8, I had a variable to pull data from a database.
this code started with Kailas's answer up above
https://jsfiddle.net/jim54729/memmu2wb/3/
.containerBox {
position: relative;
display: inline-block;
}
.text-box {
position: absolute;
height: 30%;
text-align: center;
width: 100%;
margin: auto;
top: 0;
bottom: 0;
right: 0;
left: 0;
font-size: 30px;
}
.img-responsive {
display: block;
max-width: 100%;
height: 120px;
margin: auto;
padding: auto;
}
.dataNumber {
margin-top: auto;
}
<div class="containerBox">
<img class="img-responsive" src="https://s20.postimg.org/huun8e6fh/Gold_Ring.png">
<div class='text-box'>
<p class='dataNumber'> 8 </p>
</div>
</div>
A small and short way of doing the same:
.image {
position: relative;
margin-bottom: 20px;
width: 100%;
height: 300px;
color: white;
background: url('https://via.placeholder.com/600') no-repeat;
background-size: 250px 250px;
}
<div class="image">
<p>
<h3>Heading 3</h3>
<h5>Heading 5</h5>
</p>
</div>
Quick solution: Set position: relative; on the container element and set position: absolute; on child elements in that container element, with the necessary top, left, bottom, right-adjusting parameters:
.top-left {
position: absolute;
top: 2px;
left: 2px;
}
.bottom-right {
position: absolute;
bottom: 2px;
right: 2px;
}
.container {
position: relative;
text-align: center;
color: white;
float:left;color: white;
text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}
<div class="container" style="">
<img src="https://www.wikipedia.org/portal/wikipedia.org/assets/img/Wikipedia-logo-v2#2x.png" width="100">
<div class="top-left">Wikipedia</div>
<div class="bottom-right">Everyone's Encyclopedia</div>
</div>
Center it directly in the middle with the following CSS...
top: 50%;
left: 50%;
transform: translate(-50%, -50%);