CODEWITHSUNDEEP
htmlcss
jz22
jz22

Reputation: 2658

Image is not properly centered

I want the button stay where it is, but the logo to be centered in relation to the width of the screen. However the logo is a bit more to the right. I think it is due to the button on the left side. In addition, how would you center the logo vertically within the menu bar? Thanks for your help.

<div style="position:fixed; display:inline; max-width:100%; background-color:white; left:0px; top:0px; right:0px; border-bottom:1px solid #6C7A89; text-align:center;">
  <button style="width:80px; height:80px; background:transparent; border:none; font-size:27px; outline:none; float:left;" onclick="w3_open()">☰</button>
  <img src="https://nebulon.io/nebulon.png" style="max-height:70px;">
</div>

https://jsfiddle.net/bjLex5qm/1/

Upvotes: 1

Views: 61

Answers (4)

BILAL AHMAD
BILAL AHMAD

Reputation: 712

The simplest solution is to use tables you can easily specify "vertical-align:middle" property in table cells and make the content look completely centered.

Image

Please refer to the following code and Fiddle.

<div style="position:fixed; display:inline; max-width:100%; background-color:white; left:0px; top:0px; right:0px; border-bottom:1px solid #6C7A89; text-align:center;">
  <table>
    <tr>
      <td>
        <button style="width:80px; height:80px; background:transparent; border:none; font-size:27px; outline:none; float:left;" onclick="w3_open()">☰</button>
      </td>
      <td style="width:100%;"><img src="https://nebulon.io/nebulon.png" style="max-height:70px;vertical-align:middle"></td>
    </tr>
  </table>


</div>

Upvotes: 0

SLL
SLL

Reputation: 271

Use position absolute and transforms on the image. This would center vertically and horizontally. 

img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); 
}

Upvotes: 1

Julio Feferman
Julio Feferman

Reputation: 2664

I set the image position to absolute and calculate the center using left:calc(50vw - 50px), or the left position is half of the viewport minus half of the image width.

.container {
  position: fixed;
  display: inline;
  max-width: 100%;
  background-color: white;
  left: 0px;
  top: 0px;
  right: 0px;
  border-bottom: 1px solid #6C7A89;
  text-align: center;
}

button {
  width: 80px;
  height: 80px;
  background: transparent;
  border: none;
  font-size: 27px;
  outline: none;
  float: left;
}

img {
  max-height: 70px;
  display:block;
  position:absolute;
  left:calc(50vw - 50px);
}
<div class="container">
  <button onclick="w3_open()">☰</button>
  <img src="https://nebulon.io/nebulon.png">
</div>

Upvotes: 1

Balakrishna Gondesi
Balakrishna Gondesi

Reputation: 118

updated the fiddle. check it out.

jsfiddle link

Took the liberty to remove the inline styles 

.header{
  position:fixed; display:inline; max-width:100%; background-color:white; left:0px; top:0px; right:0px; border-bottom:1px solid #6C7A89; text-align:center;
}
.menu{
  width:80px; height:80px; background:transparent; border:none; font-size:27px; outline:none; 
  position:absolute;
  left: 0;
}
.logo{
  max-height:70px;
  
}
<div  class = 'header'>
  <button style="" onclick="w3_open()" class = 'menu'>☰</button>
  <img src="https://nebulon.io/nebulon.png" class = 'logo'>
</div>

Upvotes: 1

Related Questions