CODEWITHSUNDEEP
htmlcss
Samuel
Samuel

Reputation: 1406

put a div in center and align an image to its "left" side

Here is the demo code

<div class="container">
 <div class="header">
    <img class="logo" src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png"/>
     <span class="text">Title Here</span>
  </div>
</div>

I am trying to put the "Title" in center and then place the logo, next to it in the left side of it.

The title name would be dynamic so it should always be at the center irrespective of length

Upvotes: 0

Views: 53

Answers (3)

Nilesh Naik
Nilesh Naik

Reputation: 761

Is this how you want it to be?

.container {
  padding: 15px 15px 20px 15px;
  height: 247px;
  width: 780px;
  border-radius: 5px;
  margin-bottom: 30px;
  background-color: #2D343D;
  position: relative;
}

.logo {
  width: 55px;
  vertical-align: bottom;
}

.header {
  height: 56px;
  color: #FFFFFF;
  margin-top: 15px;
  font-size: 29.98px;
  letter-spacing: 0.43px;
  line-height: 40px;
  text-align: center;
  position: absolute;
  top: 50%;
  left:50%;
  transform: translate(-50%,-50%);
}
<div class="container">
  <div class="header">
    <img class="logo" src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" />
    <span class="text">Title Here</span>
  </div>
</div>

Upvotes: 0

Shashank Vivek
Shashank Vivek

Reputation: 17494

Try

this demo

.container{
    padding: 15px 15px 20px 15px;
    height: 247px;
    width: 780px;
    border-radius: 5px;
    margin-bottom: 30px;
    background-color: #2D343D;
}

.logo {
  width: 55px;
  vertical-align:middle;
}

.header {
        height: 56px;
        color: #FFFFFF;
        margin-top: 15px;
        font-size: 29.98px;
        letter-spacing: 0.43px;
        line-height: 40px;
        text-align: center;
        position: relative;
}

Upvotes: 1

Lalji Tadhani
Lalji Tadhani

Reputation: 14149

Change CSS

.container{
    padding: 15px 15px 20px 15px;
    height: 247px;
    width: 780px;
    border-radius: 5px;
    margin-bottom: 30px;
    background-color: #2D343D;
}

.logo {
  width: 55px;
  float:left;
  vertical-align:middle;
}

.header {
        height: 56px;
        color: #FFFFFF;
        margin-top: 15px;
        font-size: 29.98px;
        letter-spacing: 0.43px;
        line-height: 40px;
        text-align:center;
        position: relative;
}

http://jsfiddle.net/d902fzyn/

Upvotes: 1

Related Questions