Вертикально выровнять div относительно родственного брата

У меня есть форма, и я хочу отобразить текст справки. Иногда текст может быть немного длиннее. Я хочу установить фиксированную ширину в div, содержащий текст справки, и увеличить его по высоте. Затем, чтобы выровнять середину текста справки с относительным входом. Я гибкий со структурой HTML.Вертикально выровнять div относительно родственного брата

Это fiddle с формой и текстом справки.

CSS

.form-parameter { 
    display : block; 
} 
.form-parameter label , .form-parameter input { 
    width : 150px; 
    display : inline-block; 
} 

.form-parameter-helptext { 
    width : 150px; 
    visibility: hidden; 
    opacity: 0; 
    -webkit-transition: opacity 0.1s linear; 
} 
.form-parameter:hover .form-parameter-helptext { 
    visibility : visible;  
    opacity: 1; 
}

Все, что я нашел до сих пор, как выровнять Див относительно родителя, но не родственного.

источник

2013-09-21 haki

Какая поддержка браузера вам нужна – Itay

Вы говорите, что вы гибко относитесь к структуре HTML. Почему бы не пойти с подсказками Bootstraps (http://getbootstrap.com/2.3.2/javascript.html#tooltips)? –

Вам понадобится javascript для вертикального центрирования подсказок. Я предполагаю, что вы захотите их полностью расположить, чтобы они не вмешивались в ваш макет формы. Я считаю, что это так же хорошо, как вы собираетесь использовать только с CSS: http://jsfiddle.net/koala_dev/Wvb29/11/ –

Я установить ширину form-parametr в 530px и добавить position:relative к нему, а также за помощь DIV добавить position:abolute;right:0;top:0;width:200px , насколько я знаю, вы не можете выровнять середину текста справки к относительному вход только с HTML и CSS но я думаю, что это то, что вы хотите рядом с текстом выравнивая справки: DEMO

и для записи, которую нужно установить display:block в этот DIV, когда вы хотите, чтобы ваша ширина работать, и вы хотите помочь, чтобы быть невидимым, вы, использовал visibility : hidden таким образом, что вы только что скрыли этот div, но, как вы видите, есть пробел, который удерживает место для вашего текста справки, если вы хотите удалить это пробел, вы должны использовать display:none вместо

источник

2013-09-21 18:02:55

Попробуйте это:

.form-parameter-helptext { 
    visibility: hidden; 
    color: #333; 
    background-color: #EEE; 
    border: 2px solid lightblue; 
    font-size: 13px; 
    padding: 5px; 
    margin-right: 10px; 
    opacity: 0; 
    -webkit-transition: opacity 0.1s linear; 
    /* This is what I added */ 
    width:100px; // add the width 
    position:absolute; // set the position to absolute 
}

Я не проверял его на любом браузере или веб-страницы, но скрипку работает отлично.

источник

2013-09-22 09:15:12 Shina

Вертикально выровнять div относительно родственного брата

ответ

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