2013-07-08 4 views
0

Я создаю сеть, но имею проблемы с выравниванием div. Не могу исправить эту проблему в течение дня.Force align div с верхним div

Как принудительно выровнять изображение (текстовое изображение)? Он находится внутри div.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml"> 

<head> 

<meta http-equiv="Content-Type" charset="utf-8;" content="text/html" /> 



<link rel="stylesheet" type="text/css" href="styles.css" /> 

</head> 
< 

И заставьте нижний div остановиться при изменении размера окна или увеличении/уменьшении.

+5

Ну, хорошее начало было бы полностью удалить этот образ с использовать ''

тег – iConnor

+0

я попытался удалить его, но до сих пор не работает. – yakults

+1

Согласитесь с Коннором, используя изображение для текста, это действительно плохая идея. – Jacques

ответ

0

первый вопрос не добавляют определенную маржу, как «Правое поле: 300px», когда вы хотите, чтобы изменить размер или масштаб изображения в/из них.

и вторая проблема добавляет к изображению «float: right».

следующее изменение кода поможет решить вашу проблему.

<div style="width: 960px; margin:0 auto;" align="left"> 
    <p> 
    <span style="float:left"> 
     <br> 
     ABOUT CTI 
    </span> 
    <img src="images/about-cti.jpg"/> 
    </p> 
</div> 
+0

Хорошо работает на FF и Chrome, но не влияет на IE 10. – yakults

0

Если вы серьезно хотите использовать «текстовое изображение» в качестве обычного изображения, почему бы не использовать его в таблице стилей? Так что прямо сейчас у вас есть это в div, поэтому сделайте div таким, как класс или id, и создайте таблицу стилей, где у вас есть это изображение в качестве фонового изображения. Затем вы можете использовать тактику положения, чтобы поместить изображение туда, где хотите.

HTML: 

<body> 
     <div class="textimage"> 

     </div> 
</body> 


CSS: 

.textimage{ 
width:500px; 
height:500px; 
background-image: url('..whatever.gif'); 
background-position: 50px 50px; //the first coordinate moves the image left to right // while the second coordinate moves it up and down 
} 
0

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

<div style="text-align: center"> 
    <img style="width: 960px;" src="images/about us img.jpg"></img> 
    <div style="text-align: center"> 
      <img src="images/about-cti.jpg"></img> 
      <br />ABOUT CTI 
    </div> 
</div> 
Смежные вопросы