CODEWITHSUNDEEP
htmlcss
Jakob Nielsen
Jakob Nielsen

Reputation: 5198

Div with text in middle and right

I want to have a div with two images on the left, some centered text and some text on the right.

One of the many attempts: http://jsfiddle.net/yu8bz4h4/

The problem is that I cant figure out how to get the p elements in the same line while keeping center and right the alignments

HTML:

<div class="outer">
    <img class="icon" src="http://www.mobafire.com/images/champion/icon/leona.png" />
    <img class="icon" src="http://www.mobafire.com/images/champion/icon/leona.png" />
    <p class="center" >centered</p>
    <p class="right" >right</p>
</div>

CSS:

.outer {
    height: 50px;
    width: 800px;
}

.icon {
    width: 44px;
    height: 44px;
}

.outer p {
    margin 0;
}

.center {
    text-align: center;
    width: auto;
}

.right {
    text-align: right;
    width: auto;
}

Upvotes: 0

Views: 80

Answers (3)

Anwar Hussain
Anwar Hussain

Reputation: 450

I am pretty much sure you wanted something like this. Though your question is not clear. Never forget to write codes with semantic meaning. Here's your solution following more semantic way: codepen.

Or here:

.outer {
  height: 50px;
  width: 800px;
  overflow: hidden;
}
.column {
  width: 33.33%;
  float: left;
}
.icon {
  width: 44px;
  height: 44px;
  margin-right: 10px;
}
.center {
  text-align: center;
}
.right {
  text-align: right;
}
<div class="outer">
  <div class="column">
    <img class="icon" src="http://www.mobafire.com/images/champion/icon/leona.png" />
    <img class="icon" src="http://www.mobafire.com/images/champion/icon/leona.png" />
  </div>

  <div class="column">
    <p class="center">centered</p>
  </div>

  <div class="column">
    <p class="right">right</p>
  </div>
</div>

Upvotes: 2

sideroxylon
sideroxylon

Reputation: 4416

Revised code in response to OP's comments:

.outer {
  height: 50px;
  width: 300px;
  position: relative;
}
.icon {
  width: 44px;
  height: 44px;
  float: left;
}
.center {
  text-align: center;
  width: 100%;
  position: absolute;
  left: 0;
}
.right {
  position: absolute;
  right: 0;
  width: auto;
}
<div class="outer">
  <img class="icon" src="http://www.mobafire.com/images/champion/icon/leona.png" />
  <img class="icon" src="http://www.mobafire.com/images/champion/icon/leona.png" />
  <p class="center">centered</p>
  <p class="right">right</p>
</div>

Upvotes: 1

Aishwarya R
Aishwarya R

Reputation: 657

Replace all p with div.Then write css code.The text comes in one line.

Hope this works.

.outer {
    height: 50px;
    width: 800px;
}

.icon {
    width: 44px;
    height: 44px;
}

.outer p {
    margin 0;
}

.center {
    margin-left:50%;
    
    width: auto;
  position:absolute
}

.right {
     margin-left:100%;
    width: auto;
   position: absolute;
 
}
<div class="outer">
    <img class="icon" src="http://www.mobafire.com/images/champion/icon/leona.png" />
    <img class="icon" src="http://www.mobafire.com/images/champion/icon/leona.png" />
    <div class="center" >centered</div>
    <div class="right" >right</div>
</div>

Upvotes: 2

Related Questions