Получение CSS для «float: right» и вертикального центра

У меня возникли проблемы с получением небольшого фрагмента текста, который будет центрироваться при плавании рядом с изображением.Получение CSS для «float: right» и вертикального центра

<html> 
<head> 
<style type="text/css"> 
img 
{ 
float:right; 
} 
</style> 
</head> 
<body> 
<p>In the paragraph below, we have added an image with style <b>float:right</b>. The result is that the image will float to the right in the paragraph.</p> 
<div> 
<img src="logocss.gif" width="95" height="84" /> 
<div style="position:relative; top: 20px;"> 
This 
</div> 
<div> 
Other stuff... 
</body> 
</html>

(Вы можете скопировать и вставить этот код в http://www.w3schools.com/CSS/tryit.asp?filename=trycss_float, чтобы увидеть его в действии.

То, что я хотел бы способ вертикально центрировать текст, плавая рядом с этим изображением., А также не испортить текст, который появляется после него. (как вы можете видеть, «Другое вещество ...» находится поверх «Это»)

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

UPDATE

Хорошо, я вырвал часть моей asp.net сгенерированной страницы, которая показывает меня проблему. Я понимаю, что код уродлив и извиняется. Он был сгенерирован машиной

<html> 
<head> 
<style type="text/css"> 
img 
{ 
    float:right; 
} 
</style> 
</head> 
<body> 
<p>In the paragraph below, we have added an image with style <b>float:right</b>. The result is that the image will float to the right in the paragraph.</p> 
<div> 
<table> 
<tr> 
<td> 
<div style="line-height:84px;"> 
<img src="logocss.gif" width="95" height="84" /> 
<span>This </span> 
</div> 
</td> 
</tr> 
</table> 
Other stuff... 
<br> 
<br> 
Actual application: 
<br> 
<div style="width:300px;"> 
    <div style="width:300px;"> 
    <input type="hidden"/> 
    <table border="0" style="border-collapse:collapse;border-spacing:1px;"> 
     <tr> 
     <td style="width:250px;"><div style="line-height: 50px;"> 
      <input type="image" title="Calculate Field" src="logocss.gif" style="border-width:0px;float: right;" /><span style="display:inline-block;color:Black;width:250px;">Email</span> 
      </div></td><td style="width:350px;"><table border="0"> 
     <tr> 
     <td><input style="background-color:White;height:100%;width:300px;" /></td><td style="width:300px;"></td></tr></table></td><td style="width:300px;"></td> 
     </tr><tr style="height:0px;"> 
     <td></td><td colspan="2" style="width:300px;"><span style="display:inline-block;height:0px;width:300px;"></span></td> 
     </tr> 
</table> 
</div> 
</div> 
</body> 
</html>

Извините за большой код, но его рабочий пример моей проблемы. Я сделал трюк с высотой линии, но, похоже, это не имеет никакого эффекта. В основном, я хочу, чтобы элемент управления редактирования был вертикально центрирован в середине изображения (что легко из-за таблицы), а текст «Электронная почта» был вертикально центрирован в середине изображения. Я не могу заставить его работать, хотя в этой договоренности. Что я делаю не так?

источник

2009-11-19 Earlz

Ну, я не уверен, куда они пошли. Но кто-то сделал сообщение о 'padding-top', которое именно то, что мне нужно. Вы можете восстановить это сообщение, потому что это помогло мне, кроме центра выравнивания текста. На самом деле я бы назвал это ответом. – Earlz

Что относительно этого? (Обратите внимание, что значение высота линии равно высоте изображения в):

<html> 
<head> 
<style type="text/css"> 
img 
{ 
    float:right; 
} 
</style> 
</head> 
<body> 
<p>In the paragraph below, we have added an image with style <b>float:right</b>. The result is that the image will float to the right in the paragraph.</p> 
<div> 
<div style="text-align:right;line-height:84px;"> 
<img src="logocss.gif" width="95" height="84" /> 
This 
</div> 

Other stuff... 
</body> 
</html>

UPDATE:

Учитывая обновленный код, я пришел с этим:

<div style="width:300px;"> 
    <div style="width:300px;"> 
    <input type="hidden"/> 
    <table border="0" style="border-collapse:collapse;border-spacing:1px;"> 
     <tr> 
     <td style="width:250px;"><div style="line-height: 84px; width:250px; text-align:right;"> 
      <input type="image" title="Calculate Field" src="logocss.gif" style="border-width:0px;float: right;" />Email 
      </div></td><td style="width:350px;"><table border="0"> 
     <tr> 
     <td><input style="background-color:White;height:100%;width:300px;" /></td><td style="width:300px;"></td></tr></table></td><td style="width:300px;"></td> 
     </tr><tr style="height:0px;"> 
     <td></td><td colspan="2" style="width:300px;"><span style="display:inline-block;height:0px;width:300px;"></span></td> 
     </tr> 
</table> 
</div> 
</div>

Я не говоря, что это лучший способ сделать это, но я старался не слишком сильно модифицировать ваш код. На мой взгляд, вам не нужно обертывать текст в промежутке.

Если вы хотите придерживаться с помощью таблиц, то попробуйте посмотреть на VALIGN = «средний» свойство тд элемента: http://www.w3schools.com/TAGS/att_td_valign.asp Но если вы хотите сделать это, вы должны отделить изображение от текста и положить их в разных tds.

источник

2009-11-19 21:55:30

Это как раз то, что мне нужно ... но у меня возникли проблемы с тем, чтобы он работал в моем фактическом приложении сейчас. Я оставлю этот вопрос открытым, пока не пойму. (У этого возникли бы проблемы внутри ?) – Earlz

См. Мой обновленный вопрос. Может быть, вы можете мне помочь – Earlz

Взгляните на мой обновленный ответ. Надеюсь, это поможет. –

Возможно, это то, что вы ищете.

Я думаю, вы имеете в виду, что хотите изображение с правой стороны DIV. Поплавок справа поместит его на правый конец контейнера. Который не имеет размера, т.е. весь экран.

<html> 
<head> 
<style type="text/css"> 
img 
{ 
float:left; 
} 
</style> 
</head> 
<body> 
<p>In the paragraph below, we have added an image with style <b>float:right</b>. The result is that the  image  will float to the right in the paragraph.</p> 
<div> 

<div style=" top: 20px;float:left;"> 
This 
</div><img src="logocss.gif" width="95" height="84" /> 
</div> 
Other stuff... 

</body> 
</html>

источник

2009-11-19 21:36:35 Glennular

Это исправляет его часть. Но я хочу, чтобы «Это» было центрировано так, чтобы оно было вертикально центрировано рядом с изображением, так что оно находится посередине изображения. (Вертикально) – Earlz

Немного отличается от решения от Glennular. Я не совсем уверен, как вы хотите это сделать, но следующие центры: текст Этот ..., плавает изображение вправо (и он будет обертывать текст, если он растягивается до изображения) и помещает Другие вещи ... под ним.

<html> 
<head> 
<style type="text/css"> 
img 
{ 
    float:right; 
} 
</style> 
</head> 
<body> 
<p>In the paragraph below, we have added an image with style <b>float:right</b>. The result is that the image will float to the right in the paragraph.</p> 
<div> 
<div style="position:relative; top: 20px; text-align:center;"> 
<img src="logocss.gif" width="95" height="84" /> 
This 
</div> 
<div style="clear:right;"> 
Other stuff... 
</body> 
</html>

источник

2009-11-19 21:40:53 Pascal

Я хочу, чтобы это вертикально центрировано, а не горизонтально. но «ясно: правильно»; это то, что мне нужно :) – Earlz

О, хватит, должно было больше обратить внимание, извините. :) – Pascal

Получение CSS для «float: right» и вертикального центра

ответ

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