Problem Statement : Center alignment not happening
Relevant code:
#tekst {
font-family: 'Roboto', sans-serif;
font-size: 14px;
color: #EFEFEF;
width: 100%;
height: 30%;
}
#innhold {
width: 100%;
height: 30%;
top: 18%;
left: 0%;
background-color: #7e7e7e;
position: absolute;
border-radius: 5px;
z-index: 2;
}
<div id="innhold">
<div id="tekst"> text </div>
</div>
any help would be appreciated.
You can use text-align:center; to center text.
#tekst {
font-family: 'Roboto', sans-serif;
font-size: 14px;
color: #EFEFEF;
width: 100%;
height: 30%;
text-align: center;
}
#innhold {
width: 100%;
height: 30%;
top: 18%;
left: 0%;
background-color: #7e7e7e;
position: absolute;
border-radius: 5px;
z-index: 2;
}
<div id="innhold">
<div id="tekst"> text </div>
</div>
To fully center your text you can use flexbox:
#tekst {
font-family: 'Roboto', sans-serif;
font-size: 14px;
color: #EFEFEF;
height: 30%;
}
#innhold {
width: 100%;
height: 30%;
top: 18%;
left: 0%;
background-color: #7e7e7e;
position: absolute;
border-radius: 5px;
z-index: 2;
display: flex;
justify-content: center;
align-items: center;
}
<div id="innhold">
<div id="tekst"> text </div>
</div>
You need to add the CSS property text-align:center;.
Hope this helps.
#tekst {
font-family: 'Roboto', sans-serif;
font-size: 14px;
text-align:center;
color: #EFEFEF;
width: 100%;
height: 30%;
}
#innhold {
width: 100%;
height: 30%;
top: 18%;
left: 0%;
background-color: #7e7e7e;
position: absolute;
border-radius: 5px;
z-index: 2;
}
<div id="innhold">
<div id="tekst"> text </div>
</div>
Related
So basically what im aiming to do is this:
However, i am not able to make the arrow (as img) show on top of div. Also i would appreciate if some1 could advice how to center the arrow vertically and horizontally.
Here is what i got:
section.main{
background-image: url(images/main.png);
overflow: auto;
padding: 290px 0px;
max-width: 1920px;
position: relative;
div{
height: 83px;
width: 83px;
background-color: #fff;
opacity: 0.5;
line-height: 83px;
vertical-align: middle;
text-align: center;
}
img.arr{
z-index: 100;
}
div.btnLeft{
float: left;
}
div.btnRight{
float: right;
}
p{
font-family: 'Playfair Display', sans-serif;
font-style: italic;
color: #fff;
font-size: 32px;
position: absolute;
top: 316px;
left: 375px;
}
<section class="main">
<p>Laisve kurti ir veikti!</p>
<div class="btnLeft">
<img class="arr" src="images/al.png">
</div>
<div class="btnRight">
<img class="arr" src="images/ar.png">
</div>
</section>
Thanks!
You can do that without any images, using a pseudo
section.main {
background-image: url(images/main.png);
overflow: auto;
padding: 90px 0px;
max-width: 1920px;
position: relative;
}
div {
position: relative;
height: 83px;
width: 83px;
background-color: lightgray;
opacity: 0.5;
}
div::after {
content: '>';
font-weight: bold;
font-size: 60px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
div.btnLeft::after {
content: '<';
}
div.btnLeft {
float: left;
}
div.btnRight {
float: right;
}
p {
font-family: 'Playfair Display', sans-serif;
font-style: italic;
color: #fff;
font-size: 32px;
position: absolute;
top: 316px;
left: 375px;
}
<section class="main">
<p>Laisve kurti ir veikti!</p>
<div class="btnLeft">
</div>
<div class="btnRight">
</div>
</section>
If you still want the images, add them like this
div::after {
content: url(images/ar.png);
}
div.btnLeft::after {
content: url(images/al.png);
}
My text is pushing div element that contains them below.
slidepassos{
position: relative;
height: 100vh;
width: 100%;
background: rgba(0,0,0,1);
float: left;
margin-top: -1px;
}
#anchorHow{
margin-top: 65px;
width: 100%;
float: left;
}
.swipe {
overflow: hidden;
visibility: hidden;
position: relative;
}
.swipe-wrap{
overflow: hidden;
position: relative;
}
.swipe-wrap > div {
float: left;
width: 100%;
position: relative;
}
.passo-um{
height: 100vh;
width: 100%;
background: #000101;
}
.passoumback{
height: 100%;
width: 100%;
background-image: url("../img/passoumu.jpg");
background-position: top center;
}
.passoumgrad{
height: 100vh;
width: 100%;
background: rgba(0,37,63,0.7);
}
.passo-um h1{
color: white;
font-weight: bold;
font-size: 45px;
text-align: center;
}
.passo-um h2{
color: #EBAC00;
font-weight: bolder;
font-size: 53px;
text-align: center;
margin-top: 15px;
margin-left: 35%;
}
.passo-um p{
color: white;
padding: 18px 8%;
font-size: 20px;
font-weight: lighter;
text-align: center;
margin-top: 23px;
float: left;
}
.passoumilu {
width: 300px;
float: left;
margin-left: 9%;
margin-top: 50px;
}
.swipeleftcontent{
z-index: 1;
background-size: 60px 60px;
margin-left: 157px;
width: 60px;
height: 60px;
position: absolute;
bottom: 14%;
}
<div id="slidepassos" class="swipe slidepassos">
<div class="swipe-wrap">
<div class="mySlides">
<div class="passo-um">
<h1>How?</h1>
<h2>Step 1:</h2>
<img src="img/passoumilu.svg" class="passoumilu">
<p>Do your coach oriented WOD. Remember, know your limits and try to break them.</p>
<div class="passoumback">
<div class="passoumgrad"></div>
</div>
<img src="img/swipeleft.png" class="swipeleftcontent">
</div>
</div>
</div>
</div>
image showing the text on top of the DIV instead inside it.
example
Ive tried to mess with the floats, and inline-blocks, but nothing affects it. Dont know how to fix it.
I'm trying to center this icon inside its div but can't seem to do that.
I tried top: 50% but that doesnt work.
The class is ion-images and I know I can send a margin-top to it but I want to know how to properly set it in the middle.
body {
margin: 0;
}
.clearfix::after {
content: "";
display: table;
clear: both;
}
/*-------------------HEADER*----------------*/
header {
position: relative;
width: 100%;
height: 100vh;
}
.header-bg {
position: absolute;
width: 100%;
height: 100%;
background-image: url(main-bg.jpg);
background-size: cover;
background-position: center;
}
.header-wrapper {
position: absolute;
width: 100%;
height: 100%;
bottom: 0;
display: flex;
flex-flow: row wrap;
justify-content: center;
align-items: center;
}
.title-wrapper {
position: relative;
width: 320px;
height: auto;
margin: 0 auto;
top: -10%;
}
.title-wrapper h1 {
text-align: center;
color: white;
letter-spacing: 5.45px;
margin-bottom: -10px;
font-size: 62px;
font-family: 'Raleway', sans-serif;
border-top: 3px solid white;
font-weight: 500;
}
.title-wrapper h3 {
text-align: center;
color: #35E2FF;
letter-spacing: 3.45px;
font-family: 'Raleway', sans-serif;
font-size: 15px;
}
.title-wrapper h2 {
color: white;
font-size: 50px;
margin-top: 80px;
font-family: 'Raleway', sans-serif;
}
.title-wrapper h4 {
color: white;
font-family: 'Raleway', sans-serif;
font-weight: 400;
text-align: center;
font-size: 25px;
margin-bottom: 50px;
}
#download {
text-align: center;
;
}
#demo:link {
text-decoration: none;
color: white;
border: 2px solid white;
text-align: center;
padding: 20px 40px;
text-transform: uppercase;
font-size: 25px;
font-family: 'Raleway', sans-serif;
transition: all 200ms ease-in-out;
-webkit-transition: all 200ms ease-in-out;
-moz-transition: all 200ms ease-in-out;
-o-transition: all 200ms ease-in-out;
}
#demo:hover {
background-color: #35E2FF;
}
/*------------------------------DESCRIPTION---------------*/
#description-wrapper {
position: relative;
width: 100%;
top: 0;
}
.desc-card {
position: relative;
width: 50%;
height: 450px;
margin: 0;
}
.desc-card.left {
float: left;
left: 0;
background-color: #000;
}
.desc-card.right {
float: right;
right: 0;
background-color: #282828;
}
#features-content {
position: absolute;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
#features-content h3 {
color: white;
font-family: 'Raleway', sans-serif;
letter-spacing: 3.5px;
font-weight: 500;
font-size: 32px;
}
#features-content p {
color: white;
font-family: 'Raleway', sans-serif;
font-weight: 300;
letter-spacing: 3.5px;
}
#features-img {
position: absolute;
width: 100%;
height: 100%;
display: flex;
flex-flow: row wrap;
justify-content: center;
align-items: center;
flex-direction: column;
}
.square {
width: 50%;
height: 50%;
}
.square.first {} .square.second {
background-color: #4A4A4A;
}
.square.third {
background-color: #4A4A4A;
}
.img-cont {
position: relative;
width: 100%;
height: 100%;
}
.ion-images {
/*THIS IS WHAT IM TRYING TO CENTER */
color: #35E2FF;
text-align: center;
font-size: 115px;
}
#under-img {
font-size: 25px;
color: #35E2FF;
margin-top: -10px;
font-family: 'Raleway', sans-serif;
font-weight: 300;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
<link href="https://fonts.googleapis.com/css?family=Raleway:300,400,500" rel="stylesheet">
<!----HEADER------>
<header>
<div class="header-bg"></div>
<div class="header-wrapper">
<div class="title-wrapper">
<h1>ATLAS</h1>
<h3>BETA</h3>
<h4>Create Professional Digital Design in any Operating System</h4>
<div id="download">Download Now
</div>
</div>
</div>
</header>
<div id="description-wrapper" class="clearfix">
<div class="desc-card left" id="features">
<div id="features-content">
<h3>The All In One Tool for Creative Designers In Any Operating System</h3>
<p>ATLAS provides users the best software to do what they do best. Design</p>
</div>
</div>
<div class="desc-card right" id="features-des">
<div id="features-img">
<div class="square first">
<div class="img-cont">
<div class="ion-images">
<!--Trying to center this--->
<p id="under-img">Photo Editing</p>
</div>
</div>
</div>
<div class="square second">
</div>
<div class="square third">
</div>
<div class="square fourth">
</div>
</div>
</div>
</div>
Try
.ion-images{ /*THIS IS WHAT IM TRYING TO CENTER */
color: #35E2FF;
text-align: center;
font-size: 115px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
Reference
If you can use Flex, try whit this.
.ion-images {
height: 100%;
flex-direction: column;
display: flex;
align-items: center;
justify-content: center;
}
Hope can i help you. Regards.
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 would like to have the div story at the bottom of the picture(mainMedia) but i also want the about div to be on top of the photo.
When i try do it the story div goes to the top because the mainMedia dive is position:absolute but i have to keep it that to keep the about dive on top of it... any ideas?
Could you please help?
Thanks a lot!
HTML
<html>
<head>
<title> Beta</title>
<!-- css links -->
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<div class="gigantic">
<div class="main">
<div class="twitterProfilePicture">
<img src="https://si0.twimg.com/profile_images/2015016150/petecashmoreavatar_normal.png">
</div>
<div class="push">
<div class="mainMedia">
<img src="http://blog.sunsafaris.com/wp-content/uploads/2013/02/dune-king-lion.jpg">
<div class="about">
<p><span>Mashable</span></br>3 Hours ago</p>
</div>
</div>
</div>
<div class="Story">
<div class="heading">
</div>
<div class="text">
</div>
</div>
</div>
</div>
</body>
</html>
CSS
body
{
margin: 0;
background-color: rgb(233,234,237);
font-family: 'lucida grande', tahoma, verdana, arial, sans-serif;
}
p
{
margin: 0;
}
.gigantic
{
width: 800px;
height: 100%;
margin-right: auto;
margin-left: auto;
padding-top: 20px;
margin-top: 40px;
/*background-color: #fff;*/
}
.main
{
width: 700px;
height: 400px;
/*background-color: #000;*/
margin-right: auto;
margin-left: auto;
padding: 30px;
}
.twitterProfilePicture
{
width: 55px;
height: 55px;
border-radius: 3px;
/*background-color: #fff;*/
position: relative;
float: left;
}
.twitterProfilePicture img
{
width: 55px;
height: 55px;
border-radius: 3px;
/*background-color: #fff;*/
position: relative;
float: left;
}
.mainMedia
{
width: 630px;
height: auto;
/*background-color: #fff;*/
float: right;
border-radius: 4px;
position: relative;
margin-bottom: 10px;
}
.mainMedia img
{
width: 630px;
height: auto;
position: relative;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
}
.about
{
position: absolute;
/*background-color: #000;*/
overflow: hidden;
height: 35px;
position: absolute;
top: 7px;
left: 7px;
font-size: 12px;
color: rgb(94,118,171);
}
.about span
{
color: #385874;
font-size: 16px;
}
.story
{
width: 630px;
height: 300px;
background-color: #fff;
position: absolute;
margin-left: 70px;
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
position: static;
bottom: 0;
}
Here's my take on what you're trying to achieve:
I put a fiddle here for you.
What you need to do is stick the story div inside the mainMedia div. You also have your css referencing ".story" when it should have been ".Story".
HTML:
<div class="gigantic">
<div class="main">
<div class="twitterProfilePicture">
<img src="https://si0.twimg.com/profile_images/2015016150/petecashmoreavatar_normal.png">
</div>
<div class="push">
<div class="mainMedia">
<img src="http://blog.sunsafaris.com/wp-content/uploads/2013/02/dune-king-lion.jpg"/>
<div class="about">
<p><span>Mashable</span></br>3 Hours ago</p>
</div>
<div class="Story">
<div class="heading">Heading</div>
<div class="text">Text Story here</div>
</div>
</div>
</div>
</div>
</div>
CSS:
body
{
margin: 0;
background-color: rgb(233,234,237);
font-family: 'lucida grande', tahoma, verdana, arial, sans-serif;
}
p
{
margin: 0;
}
.gigantic
{
width: 800px;
height: 100%;
margin-right: auto;
margin-left: auto;
padding-top: 20px;
margin-top: 40px;
/*background-color: #fff;*/
}
.main
{
width: 700px;
height: 400px;
/*background-color: #000;*/
margin-right: auto;
margin-left: auto;
padding: 30px;
}
.twitterProfilePicture
{
width: 55px;
height: 55px;
border-radius: 3px;
/*background-color: #fff;*/
position: relative;
float: left;
}
.twitterProfilePicture img
{
width: 55px;
height: 55px;
border-radius: 3px;
/*background-color: #fff;*/
position: relative;
float: left;
}
.mainMedia
{
width: 630px;
height: auto;
/*background-color: #fff;*/
float: right;
border-radius: 4px;
position: relative;
margin-bottom: 10px;
}
.mainMedia img
{
width: 630px;
height: auto;
position: relative;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
}
.about
{
position: absolute;
/*background-color: #000;*/
overflow: hidden;
height: 35px;
position: absolute;
top: 7px;
left: 7px;
font-size: 12px;
color: rgb(94,118,171);
}
.about span
{
color: #385874;
font-size: 16px;
}
.Story
{
background-color: black;
opacity:0.5;
position: absolute;
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
position: absolute;
bottom: 3px;
color:white;
width:630px; /*I made this the same as your mainMedia*/
}
I hope that helps.