Помогите Отцентрировать Текст

pattaya · September 9, 2010

Здравствуйте, не получается разместить текст по центру под всеми рисунками,

но заменив первую картинку второй в 1-м ряду - текст становится по центру, а заменив второй картинкой седьмую- все равно текст не центрируется:

В чем может быть проблема?

Great Rash · September 9, 2010


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru">

<head>
	<title>An XHTML 1.0 Strict standard template</title>
	<meta http-equiv="content-type" content="text/html;charset=utf-8" />

	<style type="text/css">
		* {
			margin: 0;
			padding: 0;
		}

		html, body {
			height: 100%;
		}

		html {
			font-size: 100.1%;
		}

		ul {
			list-style: none;
			text-align: center;
			line-height: 0;
			letter-spacing: -0.3em;
		}

		li {
			display: -moz-inline-stack;
			display: inline-block;
			//display: inline;
			//zoom: 1;
			overflow: hidden;
			width: 426px;
			padding: 10px;
			margin: 5px;
			line-height: normal;
			letter-spacing: normal;
			vertical-align: top;
			background: lightgrey;
		}
	</style>

	<script type="text/javascript">

	</script>
</head>

<body>

	<ul>
		<li>
			<img src="http://davemott.net/images/paper%20plane.jpg" alt="" /><br />
			text
		</li>
		<li>
			<img src="http://davemott.net/images/paper%20plane.jpg" alt="" /><br />
			test text
		</li>
		<li>
			<img src="http://davemott.net/images/paper%20plane.jpg" alt="" /><br />
			test text test text
		</li>
		<li>
			<img src="http://davemott.net/images/paper%20plane.jpg" alt="" /><br />
			test text test text test text test text
		</li>
		<li>
			<img src="http://davemott.net/images/paper%20plane.jpg" alt="" /><br />
			test text test text test text test text test text test text test text test text
		</li>
		<li>
			<img src="http://davemott.net/images/paper%20plane.jpg" alt="" /><br />
			test text test text test text test text test text test text test text test text 
			test text test text test text test text test text test text test text test text
		</li>
	</ul>

</body>
</html>

pattaya · September 9, 2010

Спасибо за оперативность, но хотелось бы не так глобально, для меня совсем совсем зеленого.

Great Rash · September 9, 2010

Что тут глобального? Я привел вам практически готовый код. Что мешает его адаптировать под свои нужды?

pattaya · September 9, 2010

Может, я не так выразился! Хотелось бы понять, что я не так делаю (сделал), код:

<!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" content="text/html; charset=utf-8" />
<title>Bellamare LLC - Plankton Sampling</title>

<style>

body {
background : #ffffff;
text-align : center;
margin : 0;
padding : 0;
}
.container {
width : 944px;
margin : 20px auto;
position : relative;
z-index : 10;
font : 14px, Calibri, Arial, sans-serif;
}
.div1 {
width : 944px;
height : 88px;
margin-top : 4px;
position : relative;
text-align : left;
z-index : 10;
}
.div2 {
background : #cccccc;
width : 936px;
margin : 8px 0 0 8px;
height : 80px;
top : 0;
left : 0;
z-index : 15;
position : absolute;
}
.div3 {
background : #006699;
width : 936px;
margin : 0 0 0 0;
height : 80px;
z-index : 16;
position : absolute;
}

.div4 {
height : 20px;
left : 25px;
font : 16px calibri, arial, sans-serif;
font-weight : bold;
position : absolute;
margin : 50px 20px 20px 0;
text-align : left;
color : white;
z-index : 1000;
top : 1px;
width : 574px;
}
a {
text-decoration : none;
outline : none;
color : #ffffff;
}
A:hover {
text-decoration : underline;
}
img {
border : none;
}
.container2 {
	left : 0;
	position : relative;
	top : 0;
	width : 944px;
	z-index : 10;
	color : #006699;

}

.hr { padding:5px 0;
	position:relative;
	border-bottom:4px solid #006699;
	width:100%;
	font-weight:bolder;
	text-align:left;
	color:#006699;
	text-indent:30px;
	}

.float_right {float:right;
			  margin-left:40px;
			  top:0;
}			


.container_t_big {margin : 0 15px;
				  position : relative;
				  color:#000000;
				  text-align:left;
				  font:14px Calibri, Arial, Helvetica, sans-serif;


}

h2		{color:#000000;
			text-align:left;
			margin-left:27px;
			margin-bottom:0;
			font-family:Calibri, Arial, Helvetica, sans-serif;
			font-weight:normal;
}

.pic_c td	{vertical-align:top;
			  text-align:center;
			  width:20%;
			  font-family:Calibri, Arial, Helvetica, sans-serif;
			  font-size:14px;
			  color:#000000;
			  padding-bottom:30px;


}




</style>
</head>


<body>

	<div class="container">

	   <div class="div1">

		  <div class="div2"></div>
		<div class="div3">
	   <a class="logo" href=".index.html"></a>
		<div class="div4">|  
		<a href=".index.html">Home</a>  |  
		 <a href="company.htm">Company</a>  |  
		  <a href="contact us.htm">Contact Us</a>  |  
		   <a href="news & events.htm">News & Events</a>  |  
			<a href="Past Projects.htm">Past Projects</a>   |	  
			</div>

	</div>
 </div>

			 <div class="container2">

				   <div class="hr">Plankton Sampling</div>

				   <div class="container_t_big">

				   <h2>ISIIS Technology:</h2>

				   <table  width="100%">
				  <tr class="pic_c">
				   <td width="135" height="194"><img src="../images/Plankton Study/plankton2.gif" />
					Towed Vehicles</td>
				   <td>
				   <img src="../images/Plankton Study/plankton1.gif" />Capabilities
				   </td>
				   <td>
				   <img src="../images/Plankton Study/plankton3.gif" />Analysis & Data Storage
				   </td>
				   <td>
				   <img src="../images/Plankton Study/plankton4.gif" />Images
				   </td>
				   <td>
				   <img src="../images/Plankton Study/plankton5.gif" />Publications & Articles
				   </td>
				  </tr>
				  <tr>
				   <td class="center_table" colspan="5"> <div class="float_right"><img src="../images/Plankton Study/plankton6.gif" /></div> 
				   ISIIS is the acronym for “In Situ Ichthyoplankton Imaging System”. This technology was developed in collaboration with the University of					Miami at the Rosenthiel School for Marine and Atmospheric Science (RSMAS) thanks to the leadership of Dr. Robert Cowen and Cedric Guigand.				  

				   </td>
				  </tr>
				  <tr>
				  <td><div><h2>Net Systems:</h2></div>
				  </td>
				  </tr>

				  <tr class="pic_c">
				   <td>
					<img src="../images/Plankton Study/plankton2.gif" />Light Traps
				   </td>
				   <td>
				   <img src="../images/Plankton Study/plankton8.gif" />Custom Solutions
				   </td>
				   </tr> 
				</table>

				   </div>
				  </div>
				 </div>

		  </body>
</html>

npofopr · September 9, 2010

после картинки <br />

pattaya · September 9, 2010

Точно, спасибо.

Sign In

Помогите Отцентрировать Текст

Question

pattaya

Link to comment

Share on other sites

6 answers to this question

Recommended Posts

Great Rash

Link to comment

Share on other sites

pattaya

Link to comment

Share on other sites

Great Rash

Link to comment

Share on other sites

pattaya

Link to comment

Share on other sites

npofopr

Link to comment

Share on other sites

pattaya

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information