Wie kann ich vertikale Schaltflächen neben dem Bild ausrichten?

Bitte helfen Sie mir, mein Bild neben den Tasten auszurichten. Ich möchte auch die Tasten auf der jeweils anderen, aber esWie kann ich vertikale Schaltflächen neben dem Bild ausrichten?

.body{ 
 
    background-color:#dbdbdb; 
 
} 
 
button{ 
 
    width:200px; 
 
    height:60px; 
 
    margin-right:10px; 
 
    
 
}

</div> 
 
<div class="body"> 
 
    <table> 
 
    <tr> 
 
     <td><img id="business"src="http://fullhdpictures.com/wp-content/uploads/2016/08/Business-People-Photos-HD.jpg"/></td> 
 
     <td> <button id="plan" type="button">PLANNING</button></td> 
 
     <td> <button id="strat" type="button">STRATEGY</button></td> 
 
     <td> <button id="res" type="button">RESULTS</button></td> 
 
    </tr> 
 
    </table> 
 
    
 
</div>

Quelle

2016-10-31 TGIM0791

Das ''

Element ist es * Tabellendaten * angezeigt werden, nicht ein Bild neben einem Navigationsmenü. –

Können Sie ein Bild mit dem erwarteten Ergebnis hinzufügen? –

Antwort

.body{ 
 
    background-color:#dbdbdb; 
 
} 
 
button{ 
 
    width:200px; 
 
    height:60px; 
 
    margin-right:10px; 
 
    
 
} 
 
td { 
 
    vertical-align:middle; 
 
}

</div> 
 
<div class="body"> 
 
    <table> 
 
    <tr> 
 
     <td><img id="business"src="http://fullhdpictures.com/wp-content/uploads/2016/08/Business-People-Photos-HD.jpg"/></td> 
 
     <td> 
 
     <div> 
 
      <button id="plan" type="button">PLANNING</button> 
 
      <button id="strat" type="button">STRATEGY</button> 
 
      <button id="res" type="button">RESULTS</button> 
 
     </div> 
 
     </td> 
 
    </tr> 
 
    </table> 
 
    
 
</div>

Quelle

2016-10-31 17:20:47

Nehmen Sie aus Tisch neben dem Bild sitzen machen und die nav Elemente in einem div setzen mit der gleichen Höhe wie das Bild und setzen Sie eine vertikale Ausrichtung: Mitte; dies wird das Element in der Mitte des Mutter div Element

Quelle

2016-10-31 17:06:52 HarrisJT

Fügen Sie diese in Ihrem Stylesheet setzen:

Table td 
{ 
Verticale-align: middle; 
}

Quelle

2016-10-31 17:19:10

können Sie vertikal ausrichten versuchen: top

Beispiel:

.body{ 
 
    background-color:#dbdbdb; 
 
} 
 
button{ 
 
    width:200px; 
 
    height:60px; 
 
    margin-right:10px; 
 
    
 
}

<div class="body"> 
 
    <table> 
 
    <tr> 
 
     <td><img id="business"src="http://fullhdpictures.com/wp-content/uploads/2016/08/Business-People-Photos-HD.jpg"/></td> 
 
     <td style="vertical-align:top;"> <button id="plan" type="button">PLANNING</button></td> 
 
     <td style="vertical-align:top;"> <button id="strat" type="button">STRATEGY</button></td> 
 
     <td style="vertical-align:top;"> <button id="res" type="button">RESULTS</button></td> 
 
    </tr> 
 
    </table> 
 
    
 
</div>

Quelle

2016-10-31 17:36:11

Verwenden flexbox, weniger Markup, eine bessere Flexibilität und semantisch richtiger als table

.body { 
 
    display: flex; 
 
} 
 
.body > div { 
 
    display: flex; 
 
    flex-direction: column; 
 
    justify-content: center; 
 
} 
 

 
button { 
 
    width: 200px; 
 
    height: 60px; 
 
    margin-right: 10px; 
 
} 
 

 

 
/* for demo purpose I made image smaller so one can see the layout */ 
 
.body > img { 
 
    display: block; 
 
    width: 420px; 
 
    height: 276px; 
 
}

<div class="body"> 
 
    <img id="business" src="http://fullhdpictures.com/wp-content/uploads/2016/08/Business-People-Photos-HD.jpg" /> 
 
    <div> 
 
    <button id="plan" type="button">PLANNING</button> 
 
    <button id="strat" type="button">STRATEGY</button> 
 
    <button id="res" type="button">RESULTS</button> 
 
    </div> 
 
</div>

Quelle

2016-10-31 18:49:01 LGSon

Ich habe dies versucht und die Tasten ausgerichtet, aber das Bild wurde gestreckt. – TGIM0791

@ TGIM0791 Dann hast du etwas verpasst, während du meinen Code kopierst, poste es und ich werde ... schauen, da 'table' nicht wirklich der richtige Weg ist, aber es ist dein Anruf – LGSon

#plan { 
    background-color: #B21589; 
    cursor: pointer; 
    color: white; 
    font-size: 9px; 
    font-weight: bold; 
    padding: 4px; 
    margin-top: 2px; 
    vertical-align: top; 
}

Link: - Alignment of Buttons Next to Images

Quelle

2016-10-31 18:56:26

Verwandte Themen