BlueHorse February 2016

having my <article> in the center winged by <aside> to the left and right

I am trying to have my article box in the center between my left and right aside.

      <center>
     <article>        
     </article>
     </center>

is not working.

margin-left: auto;
margin-right: auto;
display: block;

is not working.

although manually adjusting the margin works or using position relative, but I want to know WHY neither <center> nor margin: auto; are working.

I am more interested in the WHY more than the how.

#wrapper{
    width: 900px;
	height: 800px;
	margin-left: auto;
	margin-right: auto;
    font-family: khand,sans-serif;
	font-weight: bold;	
}
#socialmedia1 {
    background-image: url(tw.png);  
    background-size: 20px 20px;
    width: 20px;
    height: 20px;
    float: right;
    margin:38px 10px 0px 0px;

}
#socialmedia2 {
    background-image: url(fb.png);  
    background-size: 20px 20px;
    width: 20px;
    height: 20px;
    float: right;
    margin: 38px 10px 0px 0px;
}
#socialmedia3 {
    background-image: url(insta.png);  
    background-size: 30px 30px;
    width: 30px;
    height: 30px;
    float: right;
    margin: 30px 10px 0px 0px;

}		
 header{
    width: 800px;
	height: 70px;
	border: 3px solid black;
	bottom: 20px;
	position: relative;    /* Had to move this to the bottom
                            to make space for icons*/
	bottom: -40px;
	margin-left: auto;
	margin-right: auto;
	 
 }
 hr{
    height: 0px;
    padding: 0px;
    margin: 2px;

 }
 .logo{
	background-image :url(logo.png);
	background-size: 140px 140px;
	width: 140px;
	height:140px;
	position: relative;
	bottom: 35px;
	left: 20px;
 }
ul{	
    list-style-type: none;
    margin: 0;
        

Answers


qarar February 2016

Your can do this by css using css property :margin: 0 auto; and set a width to artical.

I have create a snippet for you to understand

div{
  border: 1px solid #000;
  width: 100%;
  height: 100px;
  text-align: center;
}
article{
  border: 1px solid #000;
  width: 100px;
  margin: 0 auto;
}
<div>
  <article>
    This is an article
  </article>
</div>


Lal February 2016

See this fiddle

The reason why the <article> was not getting centered was because the <article> was inside an <aside> and the width of the <aside> was much less than the width of the <article>. Since, it was inside the <aside> it was not getting centered with respect to the screen.

What I have done is that, I added new class left for one of the aside which makes it floated to the left. Then, moved the article to outside of the aside.

The CSS for left is as follows

aside.left{
    width: 120px;
    height: 150px;
    border: 3px solid black;
    float: left;
    clear:left;

}

and the HTML would be like

       <aside class="left">       <-----------see this (added new class ) 
           <p class="titlebannerbox" align="right">Learned</p>
       <p class="asidelogo"></p>
       <hr>
       <table cellspacing="0" style="border-spacing:-5px;">
         <tbody><tr style="line-height: 15px;">
           <td style="width: 10%">HTML</td>
           <td style="text-align: right">60%</td>
         </tr>
         <tr style="line-height: 15px;">
           <td>CSS</td>
           <td style="text-align: right">60%</td>
         </tr> 
         <tr style="line-height: 15px;">
           <td>Javascript</td>
           <td style="text-align: right">0.001%</td>
         </tr>
         <tr style="line-height: 15px;">
           <td>Java</td>
           <td style="text-align: right">0%</td>
         </tr>
         <tr style="line-height: 15px;">
           &l 

Post Status

Asked in February 2016
Viewed 1,687 times
Voted 6
Answered 2 times

Search




Leave an answer