CSS: How set more one div at center

Question

I have 4 div in Father div like this :-

<div class="mashsb-buttons">

<a style="" class="mashicon-tw" href="#" target="_blank"></a>
<a style="" class="mashicon-fb" href="#" target="_blank"></a>
<a style="" class="mashicon-gp" href="#" target="_blank"></a>
<a style="" class="mashicon-ins" href="#" target="_blank"></a>

</div>

I need the result like this pic:-

https://i.stack.imgur.com/8P0XF.jpg

Now this <a></a> I need to show it in center of my page What can do ?

I presume you mean horizontally centered. Here's my answer to a similar question. Whether you want it centered horizontally, vertically or both, I think it answers your question. [How to Center Elements within a Div](http://stackoverflow.com/questions/11978231/vertically-center-two-elements-within-a-div/31977476#31977476) — Michael Benjamin, Aug 17 '15 at 20:08

pool pro · Answer 1 · 2015-08-17T21:17:41.033

CSS:

    .mashsb-buttons {
  position: absolute;
  bottom: 10px;
  z-index: 1000;
  width:10%;
  max-width: 100%x;
  height: 60px;
  margin: 0 auto;
  left:0;
  right:0;

}

or you can use negitive margin like so:

CSS

position: absolute; 
  width: 100px; 
  height: 100px;    
  bottom: 0px;  
  left: 50%;    
  margin-left: -50px;

Fiddle

HTML:

<div class="mashsb-buttons">

<a style="" class="mashicon-tw" href="#" target="_blank">...</a>
<a style="" class="mashicon-fb" href="#" target="_blank">...</a>
<a style="" class="mashicon-gp" href="#" target="_blank">...</a>
<a style="" class="mashicon-ins" href="#" target="_blank">...</a>

</div>

https://fiddle.jshell.net/1bfofwfb/45/

You were not clear that you wanted the div to be absolute positioned. — pool pro, Aug 17 '15 at 20:58

score 0 · Answer 2 · answered Aug 17 '15 at 19:56

here ya go html

<a style="" class="mashicon-tw" href="#" target="_blank">Link 1</a><br>
<a style="" class="mashicon-fb" href="#" target="_blank">Link 2</a><br>
<a style="" class="mashicon-gp" href="#" target="_blank">Link 3</a><br>
<a style="" class="mashicon-ins" href="#" target="_blank">Link 4</a><br>

</div>

css

.mashsb-buttons{text-align: center;}

fiddle: https://jsfiddle.net/mykx37n9/3/

OR if you want them all centered on the same line take away the <br> tags like this

<div class="mashsb-buttons">

    <a style="" class="mashicon-tw" href="#" target="_blank">Link 1</a>
    <a style="" class="mashicon-fb" href="#" target="_blank">Link 2</a>
    <a style="" class="mashicon-gp" href="#" target="_blank">Link 3</a>
    <a style="" class="mashicon-ins" href="#" target="_blank">Link 4</a>

    </div>

It would have helped if you were to have that in your question originally. — Adam Buchanan Smith, Aug 17 '15 at 20:54

Mehmood · Answer 3 · 2015-08-18T09:16:27.313

0

Here is Fiddle

.mashsb-buttons{
    position:fixed;
    bottom:10px;
    left:30%;
}
.mashsb-buttons a{
    float:left;
    margin:0 10px;
}

I hope this will help you.

edited Aug 18 '15 at 09:16

answered Aug 17 '15 at 21:32

Mehmood

933
5
17

text-align:center; does not work with Position as they are 2 alignment styles – pool pro Aug 17 '15 at 22:21

score 0 · Answer 4 · edited Jun 20 '20 at 09:12

Since you tagged JQuery, here is the simplest JQuery answer. It will also works on window resize.

DEMO : http://jsfiddle.net/yeyene/dcsmsm2b/

JQUERY

$(document).ready(function(){
    makeItCenter();
});

$(window).resize(function(){
    makeItCenter();
});

function makeItCenter() {
    $('.mashsb-buttons').css({'left':($(window).width()-$('.mashsb-buttons').outerWidth())/2});
}

CSS

.mashsb-buttons{
    position:fixed;
    bottom:10px;
}
.mashsb-buttons a{
    float:left;
    margin:0 10px;
    padding:20px 25px;
    border-radius:50%;
    background:red;
}

CSS: How set more one div at center

4 Answers4

DEMO : http://jsfiddle.net/yeyene/dcsmsm2b/

JQUERY

CSS