Resto del testo in div

Ho lavorato a rifare il sito Web di mio padre che è stato creato negli anni novanta (ugh) e ho avuto problemi a trovare il testo per adattarlo all'interno di un div e allinearlo orizzontalmente. Ho bisogno che il testo si sieda l'uno accanto all'altro così si inseriscono nel div. Ecco il codice per la pagina in un jsfiddle Resto del testo in div

Esempio HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<body> 
    <div> 
     <img id="header" src="http://www.salesprofessionalsinc.com/images/new%20logo.jpg"> 
    </div> 
    <div id="links"> 
     <div class="home"> 
      <a href="index.html"><span></span>Home</a> 
     </div> 
     <div class="home"> 
      <a href="insidestaff.html"><span></span>Inside Staff</a> 
     </div> 
     <div class="home"> 
      <a href="mission.html"><span></span>Our Mission</a> 
     </div> 
    </div>

Esempio CSS

div img#header{ 
    width: 50%; 
    height: 15%; 
    margin-left: 125px; 
    margin-right: auto; 
}center input#search{ 
    width: 300px; 
    height: 45px; 
    border: solid 1px black; 
    margin-top: 55px; 
    font-size: 25px; 
}center button#searchbutt{ 
    border: solid 1px black; 
    width: 65px; 
    height: 30px; 
}#searchbutt:hover{ 
    color: #FFF; 
    background-color: #000; 
}#searchbutt{ 
    background-color: #FFF; 
    color: #000; 
}#links{ 
    height: 40px; 
    width: 100%; 
    text-align: center; 
    line-height: 40px; 
}.home{ 
    width: 80px; 
    text-align: center; 
    height: 40px; 
    background-color: white; 
    color: black; 
    padding-left: auto; 
    padding-right: auto; 
    display: inline-block; 
    border: solid 1px black; 
    vertical-align: middle; 
}.DL{ 
    width: 95; 
    text-decoration: none; 
    text-align: center; 
    height: 40px; 
    background-color: white; 
    color: black; 
    padding-left: auto; 
    padding-right: auto; 
    display: inline-block; 
    border: solid 1px black; 
}.home a{ 
    text-decoration: none; 
    color: gray; 
}.DL a{ 
    text-decoration: none; 
    color: gray; 
}div center a#DLbutt{ 
    border: solid 1px black; 
    width: 100px; 
    height: 50px; 
    background-color: black; 
}div center a#DLbutt{ 
    text-decoration: none; 
    color: gray; 
}#download{ 
    padding-top: 30px; 
}html{ 
    background-image: url("watermark.gif"); 
}.home a span{ 
    position:absolute; 
    width:100%; 
    height:100%; 
    top:0; 
    left: 0; 
    display: inline-block; 
    vertical-align: middle; 
    line-height: normal; 
}

ho bisogno del "La nostra parte missione" per essere nella stessa div.

fonte

2015-05-20 Anonymous

Perché hai la regola per ".home a span" che si trova in cima all'intera pagina? – j08691

Inoltre, l'impostazione dell'altezza della linea in modo che corrisponda all'altezza delle tue div funziona solo per centrare verticalmente una singola riga di testo. È possibile risolvere facilmente questo problema rendendo il .home div 90px wide anziché 80. http://jsfiddle.net/j08691/h2hchg2q/6/ – j08691

hai considerato l'aggiunta di * word-wrap: break-word; *? Nella classe di casa – cubanGuy

-3

Credo che questo è ciò che si sta chiedendo. Vuoi che la "nostra missione" sia nel pulsante in verticale. Basta aggiornare con questo codice. E dovrebbe funzionare. Fatemi sapere cosa ne pensate.

.home{ 
    width: 80px; 
    text-align: center; 
    height: relative; 
    background-color: white; 
    color: black; 
    padding-left: auto; 
    padding-right: auto; 
    display: inline-block; 
    border: solid 1px black; 
    vertical-align: middle; 
}

Ho cambiato l'altezza .. altezza: relativo;

fonte

2015-05-20 15:11:30 kamal

'relative' non è un valore valido per' height'. – j08691

È necessario impostare il display su display: table-cell per div.home e quindi rimuovere lo line-height impostato per questi. Questo dovrebbe allineare automaticamente il testo per te.

div img#header { 
    width: 50%; 
    height: 15%; 
    margin-left: 125px; 
    margin-right: auto; 
} 
#links { 
    height: 40px; 
    margin-left: 125px; 
    text-align: center; 
    display: inline-block; 
} 
.home { 
    width: 80px; 
    text-align: center; 
    height: 40px; 
    background-color: white; 
    color: black; 
    padding-left: auto; 
    padding-right: auto; 
    display: table-cell; 
    border: solid 1px black; 
    vertical-align: middle; 
} 
.home a { 
    text-decoration: none; 
    color: gray; 
}

http://jsfiddle.net/03syn1to/

fonte

2015-05-20 15:11:25 UsainBloot

Resto del testo in div

risposta

Problemi correlati