Сделайте текст подходящим в div

Я работаю над повторным созданием сайта моих отцов, который был создан в девяностые (тьфу), и у меня возникли проблемы с тем, чтобы текст вписывался в div и выравнивался по горизонтали. Мне нужен текст, чтобы сидеть рядом друг с другом, чтобы они вписывались в div. Вот код страницы в jsfiddle Сделайте текст подходящим в div

Пример 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>

Пример 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; 
}

мне нужно "Нашу часть миссии", чтобы быть в том же дел.

источник

2015-05-20 Anonymous

Почему у вас есть правило для '.home a span', которое находится поверх всей страницы? – j08691

Кроме того, установка высоты линии в соответствии с высотой ваших разделов работает только для вертикального центрирования одной строки текста. Вы могли бы исправить это легко, сделав div.home divs 90px широким, а не 80. http://jsfiddle.net/j08691/h2hchg2q/6/ – j08691

вы можете добавить * word-wrap: break-word; *? В домашнем классе – cubanGuy

-3

Я считаю, что это то, что вы просите. Вы хотите, чтобы «Наша миссия» была в кнопке вертикально. Просто обновите этот код. И это должно сработать. Дайте мне знать, что вы думаете.

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

Я изменил высоту .. высота: относительная;

источник

2015-05-20 15:11:30 kamal

'relative' недействительное значение для' height'. – j08691

Вам необходимо настроить отображение display: table-cell на div.home, а затем удалить line-height, который вы установили для этого. Это должно автоматически выравнивать текст для вас.

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/

источник

2015-05-20 15:11:25 UsainBloot

Сделайте текст подходящим в div

ответ

Смежные вопросы