Text-align right, table

Question

Text-align right, table

Navigation

#1 by (2 votes)
#2 by (0 votes)

1

I'm having a bit annoying problem with my td I want to position the letters next to the image ..., same as the right one but it does not follow the text-align: right;

.pvsp {
    width: 335px;
    float: right;
    background: #252525;
}

.result-battle{
    width: 147.5px;
    height: 75px;
}

.detail-player {
    display: inline-block;
}

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

.align-left {
    text-align: left;
}

.detail-player, .player-name {
    text-shadow: 0 1px 0 #171717;
    color: #908f8f;
}

.result-w {
    text-rendering: optimizelegibility;
    text-shadow: 0 0 7.4px rgba(92, 198, 149, 0.26);
    color: #4fc18c;
    text-transform: uppercase;
    font-size: 10px;
}

.result-l {
    text-rendering: optimizelegibility;
    color: #f63358;
    text-transform: uppercase;
    font-size: 10px;
}

.result-img-left {
    float: right !important;
}

.result-img-right {
    float: left;
}

.winner {
    background-image:url(../imgs/border-green.png);
    width: 57px;
    height: 57px;
}

.winner img {
    width: 30px;
    height: 30px;
    display: block;
    margin: 13px 13px auto;
}

.detail-kd {
    color: #555;
    font-size: 8pt;
}

.detail-kd b {
    color: #979797;
}
.title_sidebar1 {
padding: 20px;
margin-left: 10px;
color: #e6e6e6;
font-size: 10pt;
font-weight: 700;
}
.player-name {
font-size: 10pt;
font-weight: 750;
}

<div class="pvsp">
                    <div class="title_sidebar1">PLAYES VS PLAYER</div>
                <hr class="vdivider-black" />
                    <table class="battle-players">
                        <tbody>
                            <tr>
                                <td class="result-battle">
                                    <div class="detail-player align-right">
                                        <span class="result-w">winner</span>
                                        <p class="player-name">Laurent</p>
                                        <p class="detail-kd"><b>KD</b> 1.11</p>
                                    </div>
                                    <div class="result-img-left winner">
                                       <img src="https://via.placeholder.com/30"></div></td><tdstyle="text-align: center;" width="40px">vs</td>
                                
                                <td class="result-battle">
                                    <div class="detail-player align-left">
                                        <span class="result-w">winner</span>
                                        <p class="player-name">Laurent</p>
                                        <p class="detail-kd"><b>KD</b> 1.11</p>
                                    </div>
                                    <div class="result-img-right winner">
                                       <img src="https://via.placeholder.com/30">
                                    </div>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>

html css

asked by anonymous 11.12.2018 / 05:09

2 answers

0

Use young flex-box!

.result-battle:first-child {
  display: flex;
  justify-content: flex-end;
}

11.12.2018 / 12:45

score 2 · Accepted Answer

Your problem is more with HTML and the order of the elements than with CSS, my tip is to put float:right both in the image and in the div with the text.

In order to do this, you need to put <div class="result-img-left winner"> before <div class="detail-player align-right result-img-left"> Including as you already had a CSS class with only float:right I used it myself to make this adjustment notice that this last div I put the class result-img-left

See how you got to understand it better. I did not need to put anything in the CSS, just changed the order of the Text and Image in HTML and put the class result-img-left that you already had in your code. Note that when you use float:right the first element to receive this float will always be the rightmost element, so I inverted the order by placing the image before the text, so it stays as the first element on the right and the text that tb has float floats next to it in the correct position.

.pvsp {
  width: 335px;
  float: right;
  background: #252525;
}

.result-battle {
  width: 147.5px;
  height: 75px;
}

.detail-player {
  display: inline-block;
}

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

.align-left {
  text-align: left;
}

.detail-player,
.player-name {
  text-shadow: 0 1px 0 #171717;
  color: #908f8f;
}

.result-w {
  text-rendering: optimizelegibility;
  text-shadow: 0 0 7.4px rgba(92, 198, 149, 0.26);
  color: #4fc18c;
  text-transform: uppercase;
  font-size: 10px;
}

.result-l {
  text-rendering: optimizelegibility;
  color: #f63358;
  text-transform: uppercase;
  font-size: 10px;
}

.result-img-left {
  float: right !important;
}

.result-img-right {
  float: left;
}

.winner {
  background-image: url(../imgs/border-green.png);
  width: 57px;
  height: 57px;
}

.winner img {
  width: 30px;
  height: 30px;
  display: block;
  margin: 13px 13px auto;
}

.detail-kd {
  color: #555;
  font-size: 8pt;
}

.detail-kd b {
  color: #979797;
}

.title_sidebar1 {
  padding: 20px;
  margin-left: 10px;
  color: #e6e6e6;
  font-size: 10pt;
  font-weight: 700;
}

.player-name {
  font-size: 10pt;
  font-weight: 750;
}

<div class="pvsp">
  <div class="title_sidebar1">PLAYES VS PLAYER</div>
  <hr class="vdivider-black" />
  <table class="battle-players">
    <tbody>
      <tr>
        <td class="result-battle">
          <div class="result-img-left winner">
            <img src="https://via.placeholder.com/30"></div><divclass="detail-player align-right result-img-left">
            <span class="result-w">winner</span>
            <p class="player-name">Laurent</p>
            <p class="detail-kd"><b>KD</b> 1.11</p>
          </div>
        </td>

        <td style="text-align: center;" width="40px">vs</td>

        <td class="result-battle">
          <div class="detail-player align-left">
            <span class="result-w">winner</span>
            <p class="player-name">Laurent</p>
            <p class="detail-kd"><b>KD</b> 1.11</p>
          </div>
          <div class="result-img-right winner">
            <img src="https://via.placeholder.com/30"></div></td></tr></tbody></table></div>

Didacticexampleonfloat:right

NotethatinHTMLthediv1isthefirstandthediv4thelast,butitisthediv1thatisfarthertotheright.Soyourimageshouldcomefirsttogetmoretotheright,thenthetexttobenexttotheimageright

Showthecodebelowtoseetheexample

.box {
  width: 100px;
  height: 100px;
  border: 1px solid #000;
  float: right;
}

<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>