I have this codepen here, anyone know how to vertically and horizontally align h2 to the centre of the div element?
html
<div class="container">
<h2 class="center">
Hello World!
</h2>
</div>
css:
.container {
position:relative !important;
height: 100%;
margin: 0 auto;
display:table;
}
.center {
text-transform: uppercase;
text-align: center;
z-index: 200;
position: absolute;
vertical-align:middle;
font-size: 4em;
margin: 0;
padding: 1em .75em 0 .75em;
line-height: .8;
text-shadow: 1px 1px 10px #666666;
display:table-cell;
}
Remove positoin properties and apply 100% for your body and html.
body,html{height:100%; padding:0; margin:0;}
.container {
height: 100%;
margin: 0 auto;
padding:0;
display:table;
}
.center {
text-transform: uppercase;
text-align: center;
z-index: 200;
vertical-align:middle;
font-size: 4em;
margin: 0;
padding:0;
text-shadow: 1px 1px 10px #666666;
display:table-cell;
}
DEMO
There is def a better solution.
But here is also one:
.container {
height: 100%;
border: solid thin #000;
}
body,html{
height: 100%;
}
.center {
border: solid thin #ddd;
text-transform: uppercase;
z-index: 200;
position: absolute;
display: inline-block;
text-align:center;
left: 25%;
right: 25%;
top: 25%;
bottom:25%;
font-size: 4em;
line-height: .8;
text-shadow: 1px 1px 10px #666666;
}
display:flex; could be an hint with little CSS to set :
http://codepen.io/anon/pen/mEufx
html,body {
height:100%;
}
.container {
min-height:100%;
display:flex;
}
.center {
margin:auto;
text-transform: uppercase;
font-size: 4em;
text-shadow: 1px 1px 10px #666666;
}
Related
I have this website with a showcase div, within the div I have a "Get Started" button. I am able to vertically align the button with the margin attribute. However I do not want to horizontally align the button with margin as this will lead to some trouble for me in the future, I've tried align: center; and align="center" but the button sticks to the left side of the showcase. How can I unstick this button and horizontally align it without having to use a margin attribute?
html,
body,
header {
position: absolute;
left: 0;
top: 0;
width: 100%;
margin: 0;
margin-top: 0;
margin: auto;
padding: 0;
}
h1 {
display: inline-block;
font-family: Trebuchet MS;
font-size: 75px;
letter-spacing: 3px;
margin: 10px 0px 0px 20px;
}
h2 {
display: inline-block;
flex-direction: row;
margin: 0px 0px 0px 50px;
font-family: Georgia;
}
.highlight {
color: #45d845;
}
.heading {
background-color: #d84545;
border-bottom: 5px solid black;
padding-top: 20px;
padding-bottom: 20px;
}
#comet {
font-size: 65px;
margin-left: 20px;
}
.showcase {
background: url('background1.jpeg');
border-bottom: 5px solid black;
height: 1000px;
width: 100%;
background-size: 100% 100%;
background-repeat: no-repeat;
color: #cccccc;
}
.showcase h2 {
color: #fff;
margin-top: 170px;
font-size: 60px;
font-family: Verdana;
text-align: center;
text-shadow: 1px 3px #000;
}
#start {
align: center;
margin-top: 130px;
background-color: transparent;
color: #fff;
padding: 20px 30px 20px 30px;
text-align: center;
font-family: Helvetica;
font-weight: bold;
border-radius: 10px;
-webkit-transition-duration: 0.4s;
transition-duration: 0.4s;
}
#start:hover {
cursor: pointer;
background-color: #fff;
color: #000;
}
<header>
<div class="heading">
<h1>ThumbTac <span id="comet">☄</span> </h1>
</div>
</header>
<div class="showcase">
<h2>He moonlight difficult engrossed an it sportsmen. Interested has all devonshire difficulty jay assistance joy. Unaffected at ye </h2>
<button id="start" align="center">Get Started</button>
</div>
You can wrap your button in a div with the style text-align: center; to horizontally center your button. Example:
html, body, header{
position:absolute;
left:0;
top:0;
width: 100%;
margin: 0;
margin-top: 0;
margin: auto;
padding: 0;
}
/*Heading*/
h1{
display: inline-block;
font-family: Trebuchet MS;
font-size: 75px;
letter-spacing: 3px;
margin: 10px 0px 0px 20px;
}
h2{
display: inline-block;
flex-direction: row;
margin: 0px 0px 0px 50px;
font-family: Georgia;
}
.highlight{
color: #45d845;
}
.heading{
background-color: #d84545;
border-bottom: 5px solid black;
padding-top: 20px;
padding-bottom: 20px;
}
#comet{
font-size: 65px;
margin-left: 20px;
}
/*Showcase*/
.showcase{
background: url('background1.jpeg');
border-bottom: 5px solid black;
height: 1000px;
width: 100%;
background-size: 100% 100%;
background-repeat: no-repeat;
color: #cccccc;
}
.showcase h2{
color: #fff;
margin-top: 170px;
font-size: 60px;
font-family: Verndana;
text-align: center;
text-shadow: 1px 3px #000;
}
#start{
align: center;
margin-top: 130px;
background-color: transparent;
color: #fff;
padding: 20px 30px 20px 30px;
text-align: center;
font-family: Helvetica;
font-weight: bold;
border-radius: 10px;
-webkit-transition-duration: 0.4s; /* Safari */
transition-duration: 0.4s;
}
#start:hover{
cursor: pointer;
background-color: #fff;
color: #000;
}
<header>
<div class="heading">
<h1>ThumbTac <span id="comet">☄</span> </h1>
</div>
</header>
<div class="showcase">
<h2>He moonlight difficult engrossed an it sportsmen.
Interested has all devonshire difficulty jay
assistance joy. Unaffected at ye </h2>
<div style="text-align: center;">
<button id="start">Get Started</button>
</div>
</div>
You can consider using a flexbox. Documentation in the CSS source.
/* Global Sets */
html,
body,
header {
position: absolute;
left: 0;
top: 0;
width: 100%;
margin: 0;
margin-top: 0;
margin: auto;
padding: 0;
}
/*Heading*/
h1 {
display: inline-block;
font-family: Trebuchet MS;
font-size: 75px;
letter-spacing: 3px;
margin: 10px 0px 0px 20px;
}
h2 {
display: inline-block;
flex-direction: row;
margin: 0px 0px 0px 50px;
font-family: Georgia;
}
.highlight {
color: #45d845;
}
.heading {
background-color: #d84545;
border-bottom: 5px solid black;
padding-top: 20px;
padding-bottom: 20px;
}
#comet {
font-size: 65px;
margin-left: 20px;
}
/*Showcase*/
.showcase {
background: url('background1.jpeg');
border-bottom: 5px solid black;
height: 1000px;
width: 100%;
background-size: 100% 100%;
background-repeat: no-repeat;
color: #cccccc;
display: flex; /* Added */
flex-direction: column; /* Added */
align-items: center; /* Added, horizonal alignment */
}
.showcase h2 {
color: #fff;
margin-top: 170px;
font-size: 60px;
font-family: Verndana;
text-shadow: 1px 3px #000;
text-align: center;
}
#start {
/* align: center; Not valid CSS */
margin-top: 130px;
background-color: transparent;
color: #fff;
padding: 20px 30px 20px 30px;
/* text-align: center; No longer required */
font-family: Helvetica;
font-weight: bold;
border-radius: 10px;
-webkit-transition-duration: 0.4s;
/* Safari */
transition-duration: 0.4s;
}
#start:hover {
cursor: pointer;
background-color: #fff;
color: #000;
}
<header>
<div class="heading">
<h1>ThumbTac <span id="comet">☄</span> </h1>
</div>
</header>
<div class="showcase">
<h2>He moonlight difficult engrossed an it sportsmen. Interested has all devonshire difficulty jay assistance joy. Unaffected at ye </h2>
<button id="start" align="center">Get Started</button>
</div>
This question already has answers here:
How to remove the space between inline/inline-block elements?
(41 answers)
Closed 6 years ago.
Trying to put this on an imaged background. I've got it to semi-work but doesn't attach for some reason. Is it wrong to make it as 2 elements trying to connect them? Is there a way to make it one element, or a better way to do it?
Here's what it is now:
http://codepen.io/anon/pen/MJJJog
.wrapper {
text-align: center;
}
p {
font-family: arial;
font-weight: normal;
margin: 0;
padding: 0;
text-align: left;
}
.header__ribbon {
padding: 10px 20px;
background-color: #ad0304;
color: #fff;
width: 70%;
max-width: 350px;
text-transform: uppercase;
font-size: 24px;
display: inline-block;
vertical-align: middle;
}
.header__ribbon__point {
margin: 0;
width: 0;
height: 0;
border-top: 35px solid #ad0304;
;
border-right: 35px solid transparent;
border-bottom: 35px solid #ad0304;
;
display: inline-block;
vertical-align: middle;
border-left: 10px solid #ad0304;
}
.header__ribbon--secondaryText {
font-size: 16px;
}
<div class="wrapper">
<div class="header__ribbon">
<p>Complimentary Event -</p>
<p class="header__ribbon--secondaryText">
mark your calenders for <span class="text__B">march 1<sup>st</sup>!</span>
</p>
</div>
<div class="header__ribbon__point"></div>
</div>
There's a space between the 2 header DIV's. You can set font-size:0 in your wrapper class.
It's better to use psuedo elements, before and after IMO. Here's a fiddle for you.
https://css-tricks.com/pseudo-element-roundup/
https://jsfiddle.net/vvupo6ha/1/
<div class="wrapper">
<div class="header__ribbon">
<p>Complimentary Event -</p>
<p class="header__ribbon--secondaryText">
mark your calenders for <span class="text__B">march 1<sup>st</sup>!</span>
</p>
</div>
</div>
.wrapper {
text-align: center;
}
p {
font-family: arial;
font-weight: normal;
margin: 0;
padding: 0;
text-align: left;
}
.header__ribbon {
padding: 10px 20px;
background-color: #ad0304;
color: #fff;
width: 70%;
max-width: 350px;
text-transform: uppercase;
font-size: 24px;
display: inline-block;
vertical-align: middle;
position: relative;
}
.header__ribbon:before,
.header__ribbon:after {
position: absolute;
content: '';
top:0;
border-top: 35px solid #ad0304;
border-bottom: 35px solid #ad0304;
}
.header__ribbon:after {
right: -35px;
border-right: 35px solid transparent;
border-left: 10px solid #ad0304;
}
.header__ribbon:before {
left:-35px;
top:0;
border-right: 10px solid #ad0304;
border-left: 35px solid transparent;
}
You've styled .header__ribbon and .header__ribbon__point as inline-blocks, so inline rules apply: you have to remove all spaces between them.
I would use flexbox on the .wrapper
.wrapper{
text-align:center;
display: flex;
justify-content: center
}
p{
font-family:arial;
font-weight:normal;
margin:0;
padding:0;
text-align:left;
}
.header__ribbon{
padding: 10px 20px;
background-color: #ad0304;
color:#fff;
width:70%;
max-width: 350px;
text-transform: uppercase;
font-size: 24px;
display:inline-block;
vertical-align: middle;
}
.header__ribbon__point{
margin:0;
width: 0;
height:0;
border-top:35px solid #ad0304;;
border-right: 35px solid transparent;
border-bottom: 35px solid #ad0304;;
display: inline-block;
vertical-align: middle;
border-left: 10px solid #ad0304;
}
.header__ribbon--secondaryText{
font-size: 16px;
}
http://codepen.io/anon/pen/xgggjq
I have a container I want to make a h2 appear aligned to the center with a slight line behind it. What I can't do is to make the line go behind the h2 box. No matter what I try, it keeps crossing over the h2 box.
Here goes a sample of what I need to accomplish:
Any help appreciated.
<div class="wrapper">
<div class="section-header">
<h2>H2 needs to be centered</h2>
<div class="line-section-header"></div>
</div>
</div>
The css I'm using is:
h2 {
font-family: 'Open Sans', Arial, sans-serif;
font-family: 20px;
font-weight: 700;
text-transform: uppercase;
width: 140px;
color: #3F3F3F;
background-color: white;
padding: 5px 10px;
border: 1px solid #D3D3D3;
text-align: center;
margin: 0 auto;
z-index: 999;
}
.wrapper {
margin: 0 auto;
width: 980px;
height: 1000px;
background-color: #white;
}
.section-header {
width: 100%;
height: auto;
background-color: white;
float: left;
position: relative;
}
.line-section-header {
width: 100%;
height: 1px;
background-color: #D3D3D3;
margin-top: 15px;
position: absolute;
}
I made a sample. check my jsfiddle http://jsfiddle.net/amitv1093/r3arp2m8/
html
<div class="container">
<h2> h2 </h2>
<div class="line"> </div>
</div>
css
.container
{
position:relative;
text-align:center;
background:#d9d9d9;
z-index:-99;
padding:12px 0px;
}
h2
{
width:100px;
background:grey;
height:50px;
text-align:center;
margin:0px auto;
line-height:50px;
}
.line
{
position:absolute;
width:100%;
height: 1px;
background: red;
top:50%;
margin:1px 0px;
z-index:-9;
}
h2 { //other props position: relative; }
alignment will be dynamic as container height
.wrapper {
margin: 0 auto;
width: 980px;
height: 1000px;
background-color: #white;
}
.section-header {
width: 100%;
height: auto;
background-color: white;
float: left;
position: relative;
}
h2 {
font-family: 'Open Sans', Arial, sans-serif;
font-family: 20px;
font-weight: 700;
text-transform: uppercase;
width: 140px;
color: #3F3F3F;
background-color: white;
padding: 5px 10px;
border: 1px solid #D3D3D3;
text-align: center;
margin: 0 auto;
z-index: 999;
position: relative;
}
.line-section-header {
width: 100%;
height: 1px;
background-color: #D3D3D3;
top: 50%;
position: absolute;
z-index: 1;
}
<div class="wrapper">
<div class="section-header">
<h2>H2 needs to be centered</h2>
<div class="line-section-header"></div>
</div>
</div>
Try adding this:
h2 {
position: absolute;
left:0;
right:0;
margin:auto;
}
.line-section-header {
margin-top: 50px;
position: absolute;
}
Try changing this in css:
h2 {
font-family: 'Open Sans', Arial, sans-serif;
font-family: 20px;
font-weight: 700;
text-transform: uppercase;
width: 140px;
color: #3F3F3F;
background-color: white;
padding: 5px 10px;
border: 1px solid #D3D3D3;
text-align: center;
margin: 0 auto;
margin-left: 420px;
z-index: 2;
position: absolute;
}
.wrapper {
margin: 0 auto;
width: 980px;
height: 1000px;
background-color: #white;
position: relative;
}
.section-header {
width: 100%;
height: auto;
background-color: white;
float: left;
position: relative;
}
.line-section-header {
width: 100%;
height: 1px;
background-color: #D3D3D3;
margin-top: 70px;
position: absolute;
z-index: 1;
}
I'm trying to align my icon inside a square div to have both properties: CENTER + MIDDLE
This is what I hope to get :
I have tried this on my CSS :
/* Slick Settings */
.slick-next {
right: 0px;
border: 1px solid black;
width:35px;
height:35px;
padding: 5px;
display:table;
text-align: center;
}
.slick-prev {
left: 360px;
border: 1px solid black;
width:35px;
height:35px;
padding: 5px;
display:table;
text-align: center;
}
.slick-next:before {
font-family: FontAwesome;
content:"\f105";
color:black;
display: table-cell;
vertical-align: middle;
left: 50%;
}
.slick-prev:before {
font-family: FontAwesome;
content:"\f104";
color:black;
display: table-cell;
vertical-align: middle;
left: 50%;
}
This is what I produce :
Can someone help me with this ?
Feel free to suggest me if you have any other better way of archieving this.
Thanks in advance.
You could also do it this way.
.slick-next {
border: 1px solid black;
width: 40px;
height: 40px;
text-align: center;
}
.slick-next:after {
display: inline-block;
vertical-align: middle;
content: "";
height: 100%;
}
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="slick-next"><i class="fa fa-angle-right"></i></div>
left: 50%; would only work on an absolutely positioned element. So set those styles to position: absolute; or center them with the margin property like this:
margin-left: auto;
margin-right: auto;
Maybe you can set display to BLOCK for before pseudoelement and set line-hight of it to match DIV. That will center text vertically. Placing text-align to center and width to 100% will center text horizontally.
.slick-prev {
border: 1px solid black;
width:35px;
height:35px;
}
.slick-prev:before {
font-family: FontAwesome;
content:"\f104";
color:black;
display: block;
text-align: center;
width: 100%;
line-height: 35px;
}
<div class="slick-prev"></div>
Opp...
After playing around with my CSS. This seem to do the trick.
/* Slick Settings */
.slick-next {
right: 10px;
border: 1px solid black;
width:35px;
height:35px;
padding: 5px;
display:table;
text-align: center;
margin-left: auto;
margin-right: auto;
}
.slick-prev {
left: 360px;
border: 1px solid black;
width:35px;
height:35px;
padding: 5px;
display:table;
text-align: center;
margin-left: auto;
margin-right: auto;
}
.slick-next:before {
font-family: FontAwesome;
content:"\f105";
color:black;
}
.slick-prev:before {
font-family: FontAwesome;
content:"\f104";
color:black;
}
I think I am all-set. I got it now.
I have this image:
http://www.problemio.com/img/phoneimage.png
But when I placed in inside a page like this:
<div style="float:left">
<img src="https://i.stack.imgur.com/83Z5U.png" style="border: none;" />
</div>
<div style="float:left">
<p>
Some text
</p>
<p>
Some text
</p>
</div>
It got displayed as very big. Here is how it looks on a test page:
http://problemio.com/business/business_economics.php
Would anyone know why that happened? It is really unexpected. Here is the css I am working with
/* layout styles across the problemio project */
html
{
background-color: #ECE5B6;
#4a4647;
}
body, html
{
padding: 5px;
}
body
{
font-family: "Century Gothic",Helvetica,Arial,sans-serif;
margin: 0;
padding: 0;
font-size: 1.3em;
#background-color: #5C5957;
#background-color: #4a4647;
#background:url(/img/ui/background_image.png) top left no-repeat;
#background-size: 100%;
}
/* makes the background of the top bar gray */
.container
{
position: relative;
background-color: white;
overflow:hidden;
width:1000px;
margin: 0 auto;
-moz-border-radius: 15px;
border-radius: 15px;
}
.container_home
{
position: relative;
background-color: white;
overflow:hidden;
width:1000px;
margin: 0 auto;
}
div#bd
{
/* background-color: #f5f6f6; */ /* some form of gray */
background-color: white;
border-style:solid;
border-width:1px;
}
/* styles for banner: */
.banner
{
position: relative;
height: 40px;
background-size:100%;
#background-color: #4a4647;
}
.site_title
{
float:left;
margin-top: -3px;
margin-left: 10px;
font-weight: bold;
color: #ffce2e;
text-shadow: 2px 2px 2px rgba(0,0,0,0.8);
font-size:2.5em;
text-align: left
text-color: black;
width: 300px;
}
.site_login
{
width: 700px;
float:right;
position: absolute;
right: 10px;
bottom: 10px;
font-size: 90.0%;
color: gray;
text-align: right;
text-align: bottom;
}
/*
.bgdiv
{
position:absolute;
right:0px;
left:240px;
top:0px;
bottom:0px;
background-image: url('http://www.problemio.com/img/ui/banner_background.png');
#background-repeat: no-repeat;
}
*/
/* styles for basic template */
.content .basic
{
background: #fff;
padding: 15px;
border: 1px solid #888;
border-color: gray;
text-align: left;
}
.content .basic h1{
font-size: 2em;
font-weight:bold;
text-align: center;
}
.content .basic h2{
font-size: 1.5em;
font-weight:bold;
}
.content .basic h3{
font-size: 1.0em;
font-weight: bold;
}
#layout
{
/*margin:auto; */
#margin-top: 5px;
padding-right: 20px;
padding-left: 20px;
text-align:left;
/* background-color: #EDEDED; */
}
label span
{
float: left;
width: 15em;
}
p.half_text
{
font-size: 80.0%;
font-type: arial;
}
span.half_text
{
font-size: 80.0%;
font-type: arial;
}
p.half_height
{
margin: 5px 0;
}
.index_problem_title:visited
{
font-weight:bold;
text-decoration: none;
}
.index_problem_title
{
font-weight:bold;
text-decoration: none;
}
.index_problem_title:hover
{
text-decoration:underline;
color: gray;
}
footer a
{
color: white;
}
div.footer
{
text-align: right;
#color:#999999;
color: white;
background-color: black;
font-family:arial,times,serif;
font-size:18px;
#padding-top:20px;
line-height:150%;
position:relative;
float:right;
bottom:10px;
#height: 100px;
style: clear:both;
width: 1000px;
#background:url(/img/ui/footerbar.png) top left no-repeat;
}
#tabs-1
{
padding-left: 10px; !important;
}
.ui-tabs-panel
{
padding: 5px !important;
}
.ui-widget-header
{
background-image: none;
background-color: #EBEBEB;
padding-left: 50px;
}
.ui-state-default
{
background-image: none;
background-color: Gray;
}
To make adjacent,
<div style="float: left; width: 68%; display: inline;">
<img width="60%" height="60%" style="border: none;" src="http://www.problemio.com/img/phoneimage.png">
</div>
<div style="display: inline; float: left; width: 28%;">
<p>
Understanding and correctly forecasting the unit economics of your business is extremely important. It is a large part of a successful business plan, and the business itself. The term might sound complicated, but it is surprisingly simple. At least we will try to make it so with an example.
</p>
<p>
In an effort to make this material easy and fun to understand, we will actually go over the unit economics of a real business. Our example business: A single-location exercise gym. We will call it Bob's Fitness.
</p>
</div>
Actually , I just added some inline css to your code,you can made them in class or id also
#layout div img
{
max-width: 100%;
width: 100%;
}
Add this css in your page or place as you want.
I see you are modifying it :-) i'm testing with firebug!
In any case I tested it there
http://jsfiddle.net/eb56N/2/
I've just added
<img style="border: none; width: 100%;" src="http://www.problemio.com/img/phoneimage.png">
Maybe you already changed something.