I want to center two divs (facebook website name and facebook like/share button) to middle of div. I create one main div:
.fb_div{
background-color:black;
width:250px;
height:150px;
position:absolute;
left:20px;
top:20px;
}
and two divs into .fb_div
.facebook
{
display: inline-block;
margin-left:auto;
margin-right:auto;
color:#3b5998;
font-family: Arial;
}
.fb_share
{
margin-left:auto;
margin-right:auto;
}
margin-left:auto; and margin-right:auto; does not help me to center it to middle. Here is jsfiddle example
EDIT: I can not set left position to specific value because width of like and share button depends on text ( If i join from USA=like or SLOVAK=páči sa mi to )
If your going to use absolute positioning, you might as well do this:
.facebook{margin-left: 70px; }
.fb-share{margin-left: 74px; }
http://jsfiddle.net/e9vpcok1/
Please Find the updated code.
.facebook {
display: inline-block;
margin-left:auto;
margin-right:auto;
color:#3b5998;
font-family: Arial;
position: absolute;
left:30%;
}
.fb_share {
margin-left:auto;
margin-right:auto;
position: absolute;
left:30%;
top:20%;
}
JsFiddle
Both .facebook and .fb_share need a width.
width:80px; /*or such*/
Though I would also remove the display:inline-block form the .facebook class.
http://jsfiddle.net/de10uqtf/10/
Related
How can I display a h1 which is centered text with an underline that is smaller than the h1?
Code:
I used the following CSS Code for my H1 Tag that I gave a class:
.referenzen{
display:inline-block;
position:center;
}
.referenzen::after{
content:'';
height:2px;
width:20%;
background:#f24432;
position:absolute;
left:calc(50% - 10%);
bottom:-5px;
}
the problem: the H1 isnt centered.
Thank you!
You need to use position: relative; and text-align: center;. There is no center value for position property.
.referenzen{
display:inline-block;
position:relative;
text-align: center;
left:50%;
transform: translateX(-50%);
}
.referenzen::after{
content:'';
height:2px;
width:20%;
background:#f24432;
position:absolute;
left:calc(50% - 10%);
bottom:-5px;
}
<h1 class="referenzen">Title</h1>
Here is an answer using flex as display so you can use justify content to center your content unlike the other answer posted.
.referenzen{
display:flex;
justify-content:center;
position:relative;
margin: 0 auto;
}
.referenzen::after{
content:'';
height:2px;
width:20px;
background:#f24432;
position:absolute;
display:flex;
justify-content:center;
bottom:-5px;
}
<h1 class="referenzen">Title</h1>
I'm a newbie at this and I'm trying to figure out what I'm doing wrong. I want to centre everything within a div, but it won't budge no matter what I do.
Could you guys advise?
<div id="main1">
<h1>blah</h1>
<div id="intro">
<p>Bettina is a designer who is learning to code. She is very cluey and a bit fustrated because she doesn't know what she is doing.</p>
</div><!--intro-->
#main1 {
width:100%;
height:700px;
margin:0;
position:relative;
background-color:#CCC;}
#title {
position:absolute;
top:500px;
right:auto;
margin:auto;
}
#intro {
bottom:0px;
width:50%;
margin:0 auto;
position:absolute;
text-align:center;
}
Add text-align:center; to your <h1> for it to center. Also, remove position:absolute; from #intro for its text to center.
Working Code Snippet:
#main1 {
width:100%;
height:700px;
margin:0;
position:relative;
background-color:#CCC;
}
#main1 h1{
text-align:center;
}
#title {
position:absolute;
top:500px;
right:auto;
margin:auto;
}
#intro{
bottom:0px;
width:50%;
margin:0 auto;
/*position:absolute;*/
text-align:center;
}
<div id="main1">
<h1>blah</h1>
<div id="intro">
<p>Bettina is a designer who is learning to code. She is very cluey and a bit fustrated because she doesn't know what she is doing.</p>
</div><!--intro-->
</div><!--main1-->
You can make the parent DIV (#main1) get the center alignment first. So that elements under it are moved to the center. Als have made change for intro div(#intro) too so that it is centered and below your header.
#main1 {
width:100%;
height:700px;
margin:0;
position:relative;
background-color:#CCC;
text-align:center;
}
#intro {
margin: auto;
width:50%;
text-align:center;
}
Centering essentially means recognizing that text-align:centershould be reserved for centering text, so it's appropriate for an H1 tag or a P tag. When it comes to DIVs, if you work with margin and width styling you can usually compel a DIV to center. If you're having an issue see if you have applied position:absolute to the DIV and either remove it or change it to position:relative or if fitting position:static. Here's some code that I suggest which centers the text vertically and horizontally, as follows:
#main1 {
margin: auto;
width:100%;
height:600px;
background-color:#eee;
}
#main1 h1 {
padding-top:33%;
text-align:center;
}
#intro {
bottom:0px;
width:33%;
min-width:90px;
margin:auto;
background:#fff;
padding:32px;
}
#intro p {
text-align:justify;
}
Note: I changed the height so you could better see the results in the live demo; see below link.
I essentially worked with the HTML provided and used text of similar word count. The CSS centers the DIV containing the paragraph. The CSS for the P tag gives the illusion of centered text without actually applying text-align: center, to prevent each line of text being centered which can be visually annoying when reading sentences.
<div id="main1">
<h1>Centered</h1>
<div id="intro">
<p>Centering can be a lot of fun or it can lead to much frustration. It all depends. Sometimes it's a challenge and sometimes it's just what it is.</p>
</div><!--intro-->
Live demo here
Thank you for all your suggestions! This is what I've ended up doing:
#main1 {
width:100%;
height:700px;
margin:0;
background-color:#CCC;
position:relative;
}
#title {
display: block;
margin-left: auto;
margin-right: auto;
position:absolute;
top:300px;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
}
#intro {
width:50%;
text-align:center;
position:absolute;
bottom:0px;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
}
I've made this code for navigation bar.
HTML :
<div class="header-nav">
<div class="header">
<img src="../Pictures/LifeFrame/2.jpg" width="100%" height="100px" />
</div>
<div class="nav" align="center">
Home
Gallery
</div>
</div>
CSS :
.header-nav {
position:fixed;
top:0;
width:100%;
left:0;
right:0;
}
.nav {
height: 42px;
background-color:#FF0000;
}
a {
display:inline-block;
width:50%;
height:42px;
float:left;
}
but the text in tag a is on top not in middle. how to make the text in a tag with display inline block to middle ?
Since you're using float rule vertical-align may not work in this case so You can provide margins to this like following:
a{
display:inline-block;
width:50%;
height:42px;
float:left;
margin: 10px 0; /* add this */
}
OR
If you want to use vertical-align then you need to adjust width accordingly
a{
display:inline-block;
width:20%; /* reduce width */
height:42px;
/*float:left; */ /* remove this */
margin: 10px 0; /* add this */
vertical-align:middle;/* add this */
}
Demo
Updated Demo
Do you mean to center "Home" in the block you've created?
Try in css with padding.
a{
display:inline-block;
width:50%;
height:42px;
float:left;
padding-top: 2px;
}
Play with that
Try vertical-align: middle;
More info. on vertical-align: https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align
Remove float and use vertical-align:
a{
display:inline-block;
width:50%;
height:42px;
vertical-align: middle;
}
Do it like this:
1) Keep your HTML as is.
2) Change your CSS as follows:
.header-nav {
position:fixed;
top:0;
width:100%;
left:0;
right:0;
}
.nav {
height: 42px;
background-color:#FF0000;
vertical-align:50%;
display:flex;
align-items:center
}
a {
width:50%;
float:left;
}
See fiddle here
You can try giving padding for the <a> tag
CSS:
a{
padding:10px 0;
display:inline-block;
width:50%;
height:42px;
float:left;
}
See the fiddle:
http://jsfiddle.net/xpfsyds2/
Add the following to your 'a' style:
line-height: 42px;
I am trying to lay out a group of images in a table format with using div's. I have an image and then I want to put a Delete link underneath the image. But I can't get it to layout correctly. This is what I have:
<div class="container">
#foreach (var item in Model)
{
<div class="imagetiles">
<img src="#Url.Content(item.ImageURL)" alt="" width="30%" height="30%" />
<a>Delete</a>
</div>
}
</div>
My styles look like this, I copied it from the Fiddler mentioned in the comments below. The Fiddler works, but when I apply it, it doesn't work.
div.container {
width:100%;
}
div.imagetiles {
display:inline-block;
margin:10px;
}
div.imagetiles a {
display:block;
text-align:right;
width: 30%;
}
Below is how this renders. I want this to put the images next to each other with up to 3 per line. Why doesn't the Fiddler work for this here? Why is the imagetile div so big, I can't reduce it to fit the image?
If you want three per row, I would set the image container (not the main one) to be 33% and then make the width of each image to control the spacing around it (kind of like padding). Something like this:
div.container {
width:100%;
margin:0; /* make sure there is no padding or margin on container */
padding:0;
}
div.container div.imagetiles {
float:left;
width:33%;
padding:0;
}
div.container div.imagetiles img {
width: 95%;
margin: 10px;
}
div.imagetiles a {
display:block;
text-align:right;
width: 100%;
}
Demo: http://jsfiddle.net/Gd2V6/
If you are using something like LESS (recommend or SASS):
div.container {
width: 100%;
margin:0; padding:0;
div.imagetiles {
float:left;
width: 100%;
padding:0;
img {
width: 95%;
margin:10px;
}
a {
display:block;
text-align:right;
width: 100%; /* may need to tweak this */
}
}
}
There are small things we need to maintain when display is not defined.
Also we need to analyze the position: property of element that plays big role in this.
After adding the above I have added z-index to the element and that did it!!.
Have a look at this fiddle
CSS:
div.container {
display:block;
width:100%;
position:relative;
}
div.imagetiles {
display:inline-block;
margin:10px 5px;
float:left;
}
div.imagetiles img{
position:relative;
display:inline-block;
z-index:1;
}
div.imagetiles a {
height:25px;
width:50px;
position:relative;
display:inline-block;
float:right;
top:-25px;
left:-50px;
z-index:10;
}
your Implementation is all right. you just need to add width of imagetiles
like:
div.imagetiles {
display:inline-block;
width:30%;
margin:10px;
}
It will work like a charm :)
I have problems with trying to align the image and the h1 tag together on one line. I tried display: inline and inline-block they didn't work and only made the container of the two. I added the width to 100% on the section and still nothing. Float doesn't work either and if it did, it screws up the alignment of the page. What am I doing wrong? Sometimes it's hard to understand why it doesn't work as intended and need some help.
HTML
<section>
<img id="me" src="assets/img/pose1.jpg" alt="A photo of me." />
<h1>FOLLOW ME ON...</h1>
</section>
CSS
section{
display:inline-block;
width:100%;
}
h1{
position:relative; /*position wherever desired on the page*/
top:0;
bottom:0;
right:0;
left:0;
font-weight:bold;
font-size:40px;
color:#FFFFFF;
background-color:#FFB405;
}
Add display: inline-block; to your h1 properties, as I've done here.
Try this:-
h1{
position:relative; /*position wherever desired on the page*/
top:0;
bottom:0;
right:0;
left:0;
font-weight:bold;
font-size:40px;
color:#FFFFFF;
background-color:#FFB405;
display: inline-block;
}
You have some CSS conflicts on h1...
This should work
section {
display: block;
}
h1 {
position:relative; /*position wherever desired on the page*/
display: inline-block;
font-weight:bold;
font-size:40px;
color:#FFFFFF;
background-color:#FFB405;
}
section img {
display: inline-block;
}