Относительно выравнивая элемент в div с фиксированной шириной и высотой - PullRequest
Новая
       2

Относительно выравнивая элемент в div с фиксированной шириной и высотой

0 голосов
/ 06 февраля 2012

Моя разметка выглядит следующим образом: 

<div id="content">
   <img src="some_content.jpg">
   <form action="...">
     <input type="text" ... >
     <input type="submit" ...>
   </form>

   <div id="forgotyourpassword">
     <a href="somelink.com">Forgot your password?</a>
   </div>
</div>

Надбавка для формы генерируется CMS, поэтому я не могу ее изменить.

У content div есть фиксированныйширина и высота, так что я могу центрировать его вертикально и горизонтально на странице.В настоящее время все дочерние элементы в content установлены на display: inline-block, а затем выровнены по горизонтали и вертикали в пределах content div.

Я выровнял ссылку для забытого пароля следующим образом: intial

А вот CSS для ссылки, о которой идет речь: 

#forgot-password{

    float: right;
    margin: 0; /* reset some stuff inherited from parent */
    padding: 0; /* reset some stuff inherited from parent */
    margin-right: 171px;
    margin-top: -20px;
}

Вот некоторые соответствующие CSS: 

#content{
    position:absolute;
    width: 650px; 
    left:50%;
    top:50%;
    height:242px;
    margin-top:-126px;
    margin-left: -325px;
    text-align: center;
}

#content > *{
  vertical-align: middle;
  display: inline-block;
  zoom:1; 
  *display:inline;
  margin-left: 20px;
  margin-right: 20px;
}

Это все работает хорошо.Однако в некоторых случаях, например, если при отправке формы произошла ошибка, то к элементу from в элементе <form> будет добавлено сообщение об ошибке.

В таком случаеЯ хочу, чтобы ссылка была выровнена следующим образом: two

Проблема с моим CSS заключается в том, что ссылка на забытый пароль выровнена по нижней части родительского элемента (content).Мне нужно выровнять его относительно кнопки.

Моя первоначальная идея состояла в том, чтобы выровнять forgotyourpassword div прямо под формой.Таким образом, если размер формы изменяется при добавлении сообщений об ошибках, ссылка forgotyourpassword будет перемещена вниз.

Затем я могу установить margin-top в отрицательное количество пикселей, которое затем должно подтолкнуть мойforgotyourpassword div back up x пикселов, которые затем выровняют элемент с кнопкой отправки независимо от того, какой высоты стала форма.

Я считаю, что это не так:

  • В Firefox 10, forgotyourpassword div, кажется, не «подталкивается» на количество пикселей, которое я определил, когда оно перекрывается с областью содержимого формы.
  • В IE9,forgotyourpassword появляется над формой!

Есть ли способ сделать это только с помощью CSS и заставить его работать с IE7 и выше и firefox?

Ответы [ 2 ]

0 голосов
/ 07 февраля 2012

Так как я не могу изменить разметку для формы, я не могу вставить div для forgotyourpassword как дочерний элемент формы.

Итак, я добавил div-обертку: 

<div id="content"> 
   <img src="some_content.jpg"> 
   <div id="wrapper>
       <form action="..."> 
         <input type="text" ... > 
         <input type="submit" ...> 
       </form> 

       <div id="forgotyourpassword"> 
         <a href="somelink.com">Forgot your password?</a> 
       </div> 
   </div>
</div>

Тогда нужно просто настроить поля для forgotyourpassword div: 

#forgotyourpassword{
   float: left;
   margin-top: 10px;
}

Это лучшее решение, которое я могу найти сейчас, поскольку div-обертка недобавить любое семантическое значение в документ, но я не думаю, что в противном случае было бы простое решение (пока мы не сможем использовать математику и получить размеры элементов в CSS).

0 голосов
/ 06 февраля 2012 
#content form{
    position: absolute;
    top: 80px;
    right: 0px;
}
#forgot-password{
    height:80px;
}

Если вы попробуете что-то подобное, вы извлечете форму из потока, и над ней появится ссылка без какой-либо тонкой настройки.Как только верхнее значение для #content формы и значение высоты для # Forgot-Password совпадают, вы должны быть в безопасности как дома.

В некоторых случаях у вас могут возникнуть проблемы с очисткой абсолютно позиционированного div, но вы говоритеВы устанавливаете высоту для #content, поэтому здесь проблем не должно быть.

...