Come allineare un logo e h1 orizzontalmente in un div

voti
-1

Mi vuole allineare un logo alla estremità sinistra di un div e un testo al centro di quella div (testo dovrebbe essere assomigliare al centro dello schermo). La larghezza del div è in grado di schermo. Sia logo e testo devono essere in stessa linea. Come è possibile fare? Ho iniziare come below.But mostra due elementi come linea per linea.

<div >
<img id=imglogo alt= src=images/ logo.JPG  style=width: 300px;height:75px  />
<h1 align=center id=H1>Project Name</h1>
</div>
È pubblicato 06/03/2017 alle 04:13
fonte dall'utente
In altre lingue...                            


4 risposte

voti
0

È possibile farlo con FlexBox . Il titolo sarà centrata nello spazio accanto all'immagine.

.wrapper {
  display: flex;
}
.wrapper>div, h1 {
  flex: 1;
}
h1 {
  text-align: center;
}
<div class="wrapper">
  <div><img src="https://placehold.it/300x75" /></div>
  <h1>Project Name</h1>
</div>

Risposto il 06/03/2017 a 04:17
fonte dall'utente

voti
1

Personalmente, preferisco alimentare, perché colloca le cose abbastanza bene ed è affidabile. Vedi sotto:

<table border=1 style="table-layout: fixed; width:100%">
  <tr>
    <td><img id="imglogo" alt="" src="https://placehold.it/100x35" /></td>
    <td style="text-align: center">Centered Text</td>
    <td></td>
  </tr>
</table>

E, naturalmente, è possibile personalizzare al tuttavia si desidera.

Risposto il 06/03/2017 a 04:22
fonte dall'utente

voti
0

È possibile utilizzare le colonne di bootstrap.

img {
  max-width: 300px;
  float: left;
}

h1 {
  text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet" />
<div class="row">
  <div class="col-xs-5">
    <img class="img-responsive" src="https://placehold.it/300x75" />
  </div>
  <div class="col-xs-7">
    <h1>Project Name</h1>
  </div>
</div>

Risposto il 06/03/2017 a 04:23
fonte dall'utente

voti
0

Un approccio è quello di utilizzare assoluta in posizioni relative :

h1 {text-align:center;position:relative;height:50px;line-height:50px;}
#imglogo {height:50px;position:absolute;left:0;}

h1 {
  text-align: center;
  position: relative;
  height: 50px;
  line-height: 50px;
  margin-bottom: 4px;
}

#imglogo {
  height: 50px;
  position: absolute;
  left: 0;
}
<div>
  <h1 id="H1">
    <img id="imglogo" alt="" src="http://lindseymiller.github.io/FEWD/Homework/acme-corp-mine/images/acme-corp.jpg" /> Project Name
  </h1>
  Some more text
</div>

Penso che questo raggiunga l'effetto che stai cercando. Alcune note:

  • Abbiamo bisogno di impostare l'altezza della linea e l'altezza in modo esplicito per il <h1>, così sarà allineata verticalmente con il logo. Questo non funziona bene se il titolo avvolge le linee.
  • Su un piccolo schermo, il logo e il titolo si sovrappongono. È possibile definire un'altra regola per i display più piccoli .
Risposto il 06/03/2017 a 04:38
fonte dall'utente

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more