Machen Sie Text fit in div

Ich habe daran gearbeitet, meine Väter-Website, die in den neunziger Jahren erstellt wurde (Hugh) zu tun und ich habe Schwierigkeiten, den Text in eine div passen und horizontal ausrichten. Ich brauche den Text, um nebeneinander zu sitzen, damit sie in das div passen. Hier ist der Code für die Seite in einem jsfiddle Machen Sie Text fit in div

Beispiel 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>

Beispiel 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; 
}

ich die "Unsere Mission Teil" müssen in der gleichen div sein.

Quelle

2015-05-20 Anonymous

Warum haben Sie die Regel für ".home a span", die oben auf der gesamten Seite sitzt? – j08691

Das Festlegen der Zeilenhöhe, die der Höhe Ihrer divs entspricht, funktioniert auch nur zum vertikalen Zentrieren einer einzelnen Textzeile. Sie können dies leicht beheben, indem Sie die .home-divs 90px breit anstatt 80 machen. Http://jsfiddle.net/j08691/h2hchg2q/6/ – j08691

Haben Sie in Erwägung gezogen, * word-wrap: break-word; *? In der Home-Klasse – cubanGuy

-3

Ich glaube, das ist das, was Sie fordern. Du willst, dass die "Unsere Mission" vertikal in der Schaltfläche ist. Aktualisieren Sie einfach mit diesem Code. Und es sollte funktionieren. Lass mich wissen was du denkst.

.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; 
}

Ich änderte die Höhe .. Höhe: relativ;

Quelle

2015-05-20 15:11:30 kamal

'relativ' ist kein gültiger Wert für' Höhe ". – j08691

Sie müssen die Anzeige auf display: table-cell für div.home setzen und dann die line-height entfernen, die Sie für diese festgelegt haben. Dies sollte den Text automatisch für Sie ausrichten.

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/

Quelle

2015-05-20 15:11:25 UsainBloot

Machen Sie Text fit in div

Antwort

Verwandte Themen