I'm using font awesome library. I would like to put horizontally center the Arrow icon. And DIVs must be absolute position.
I use this code but it doesn't work.
.arrow {
left: 0;
right: 0;
}
JSFiddle Demo
Use width:100% in absolute div
.home .center {
position: absolute;
bottom: 0;
top:30px;
text-align: center;
width:100%;
}
Updated fiddle
Here is working example. You can delete .arrow css rule because it does nothing.
.home {
margin: 0 auto;
height: 100%;
width: 100%;
position: relative;
margin: 0 auto;
max-width: 960px;
}
.home .center {
position: absolute;
width: 100%;
bottom: 0;
top:30px;
text-align: center;
}
I just changed into your CSS, and it works fine.
.home {
margin: 0 auto;
}
.home .center {
margin: 0 auto;
text-align: center;
}
.arrow
margin: 0 auto;
}
Cheers!
This should work,try it.
.home {
margin: 0 auto;
height: 100%;
width: 100%;
position: absolute;
margin: 0 auto;
max-width: 960px;
}
.center {
position: relative;
bottom: 0;
top:30px;
text-align: center;
}
.arrow
left: 0;
right: 0;
As an explanation why it works: well,the wrapper div must be absolute,and its content has to be relative to position what is inside of the wrapper as you please.In this way,will be easier for you if you want to add further relative divs
Try this:
HTML Code:
<div class="home">
<div class="center">
<a class="arrow fa fa-long-arrow-down fa-3x" href="#"></a>
</div>
</div>
CSS code:
.home {
margin: 0 auto;
height: 100%;
width: 100%;
position: relative;
margin: 0 auto;
max-width: 960px;
}
.home .center {
position: absolute;
bottom: 0;
top:30px;
text-align: center;
}
.arrow {
}
Related
I want the header to align at the top-left-corner of the centered div element. The only way I can think of doing this is setting position to relative and using top with a value of 20%. The problem with this is that it causes the header to stretch the page further to the right as can be see in the fiddle.
body {
font-family: Europa;
}
.header {
position: relative;
left: 20%;
display: block;
margin-left: auto;
margin-right: auto
}
h4 {
font-size: 5em;
margin: 0 auto;
}
.box {
height: 500px;
width: 500px;
position: relative;
border-radius: 20px;
background: #6441a5;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
<div class="header">
<h4>header</h4>
</div>
<div class="box">
</div>
Simply give your header block the same width as your box.
body {
font-family: Europa;
}
.header {
position: relative;
width:500px;
display: block;
margin-left: auto;
margin-right: auto
}
h4 {
font-size: 5em;
margin: 0 auto;
}
.box {
height: 500px;
width: 500px;
position: relative;
border-radius: 20px;
background: #6441a5;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
<div class="header">
<h4>header</h4>
</div>
<div class="box">
</div>
Using a .centered wrapping div you can more easily obtain your desired results w/ keeping the elements fluid if wanted.
<div class="centered">
<h4>header</h4>
<div class="speech-bubble"></div>
</div>
<style>
h4 {
font-size: 5em;
margin: 0 auto;
}
.speech-bubble {
height: 500px;
width: 100%;
border-radius: 20px;
background:#6441a5;
margin: auto;
}
.centered{
width:500px;
margin: 0 auto;
position: relative;
}
</style>
Try giving your header h4 the same width as your speech-bubble:
https://jsfiddle.net/hxjdy720/
h4 {
font-size: 5em;
margin: 0 auto;
width: 500px;
}
The simplest solution is to put your two elements in one div, like this:
body {
font-family: Europa;
}
.header {
display: block;
margin: auto;
width: 500px;
}
h4 {
font-size: 5em;
margin: 0 auto;
}
.speech-bubble {
height: 500px;
width:500px;
position: relative;
border-radius: 20px;
background:#6441a5;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
<div class="header">
<h4>header</h4>
<div class="speech-bubble">
</div>
</div>
I just started learning HTML. In my HTML there is a div containing an image and an h1 tag. Now the h1 is coming under the div. How to position that h1 on the center of the image?
<div class="headwrap">
<div class="headimage"><img src="images/Header-image1.jpg">
<h1 class="headtxt"> I Love Photography</h1>
</div>
</div>
Css:
.headwrap {
margin: 0;
max-width: 1500px;
width: 100%;
height: 100%;
}
.headimage {
max-width: 1500px;
width: 100%;
}
.headtxt {
margin: 0 auto;
padding: 0;
-webkit-margin-before: 0em;
-webkit-margin-after: 0em;
float: left;
}
You can use position: relative on the parent element and then put position: absolute on the H1 tag:
.headwrap {
margin: 0;
max-width: 1500px;
width: 100%;
height: 100%;
position: relative;
}
.headimage {
max-width: 1500px;
width: 100%;
}
.headtxt {
position: absolute;
top: 0;
}
I'm really having a hard time researching for an answer. I tried to make my div: absolute but it will ruin the whole fluid grid. All I want is to put the div over the background div. Thanks in advance!
CSS
#mannequin {
box-sizing: border-box;
position: absolute;
width: 60%;
padding: 0 12px;
margin: 0;
float: left;
overflow: hidden;
}
#products {
clear: both;
position: absolute;
margin-left: 0;
width: 100%;
display: block;
z-index: 10;
}
HTML
<div id="mannequin"><img src="http://tinypic.com/r/29596hh/9">
<div id="products"><img src="http://tinypic.com/r/2qw09lc/9">
</div>
</div>
please make one Div position: relative; and other div make position: absolute;
Define height:100% to #products and top left to 0.
#mannequin {
box-sizing: border-box;
position: absolute;
width: 60%;
padding: 0 12px;
margin: 0;
float: left;
overflow: hidden;
}
#products {
clear: both;
position: absolute;
margin-left: 0;
width: 100%;
height: 100%;
display: block;
z-index: 10;
left:0;
top:0;
}
I added a widget area below my header and I try to center it just under the logo.
I tried to add display: block and margin:0 auto or text-align: center on #header-sidebar, but it doesn't work. Also, I tried to change the structure of the HTML code and not only make CSS tweaks, but still, the #header-sidebar stack on the left and not centered.
Here is my code:
HTML code:
<header id="header">
<div class="header-container">
<img style="vertical-align: middle;" src="#">
<nav> //here is the navigation, hidden in mobile view </nav>
<div id="header-sidebar" class="header-widget-area">
<div class="textwidget">
//some widget here
</div>
<div class="mlp_language_box">
// some other widget here
</div>
</div>
</div>
</header>
CSS code:
header#header {
position: relative;
z-index: 300;
height: 70px;
line-height: 70px;
display: block;
}
header#header #phone-toggle-menu {
left: 20px;
margin-left: 0;
position: absolute;
}
header#header .header-container {
max-width: 1200px;
margin: 0 auto;
}
header#header .logo {
width: 100%;
float: none;
box-sizing: border-box;
text-align: center;
position: absolute;
}
display:table and margin:auto for both logo and widget area will do the trick... So toggle button alone can stay absolute.
header#header {
position: relative;
z-index: 300;
height: 70px;
line-height: 70px;
display: block;
}
header#header #phone-toggle-menu {
left: 20px;
margin-left: 0;
position: absolute;
}
header#header .header-container {
max-width: 1200px;
margin: 0 auto;
}
header#header .logo {
box-sizing: border-box;
display: table;
margin: auto;
}
header #header-sidebar{
display: table;
margin: auto;
}
Replace your css code with following :
header#header {
position: relative;
z-index: 300;
height: 70px;
line-height: 70px;
display: block;
}
header#header #phone-toggle-menu {
left: 20px;
margin-left: 0;
position: absolute;
}
header#header .header-container {
max-width: 1200px;
margin: 0 auto;
text-align: center;
}
header#header .logo {
box-sizing: border-box;
text-align: center;
position: absolute;
}
The following code shows a logo and it's background. I can't get the logo centered vertically. Is it because the background div has no height defined? How can I get the background to be always 100% of the screen size with a centered logo?
body {
margin: 0;
}
#header {
min-height: 100%;
width: 100%;
position: absolute;
background-color: #CCC;
}
.logo {
max-width: 100%;
margin: 0 auto;
display: block;
position: relative;
}
<div id="header">
<img class="logo" src="http://lorempixel.com/100/50/abstract/3/">
</div>
Using absolute position for image, positing to center of div using top and left and them move it back for half using transform:translate
There is code
html,body {
margin: 0;
height:100%;
}
#header {
height: 100%;
width: 100%;
position: relative;
background-color: #CCC;
}
.logo {
display: block;
position: absolute;
top:50%; left:50%; /*positing top left corner of image to center*/
transform: translate(-50%, -50%); /* move left and up for 1/2 of image */
}
<div id="header">
<img class="logo" src="http://lorempixel.com/100/50/abstract/3/">
</div>
There is fiddle example with position:absolute;
html, body {
margin: 0;
height: 100%;
}
#header {
min-height: 100%;
width: 100%;
position: relative;
background-color: #CCC;
}
.logo {
margin: 0 auto;
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
border: 1px solid blue;
}
<div id="header">
<img class="logo" src="http://lorempixel.com/100/50/abstract/3/">
</div>
You can vertical center using this method inside your .logo class. But you most define your parent height for it to be effective.
.logo {
max-width: 100%;
margin: 0 auto;
display: block;
position: relative;
top: 50%; /* Added Code */
transform: translateY(-50%); /* Added Code */
}