تراز كردن متن قرار گرفته در وسط جدول

P

Peter Pro

Member
سلام :)
دوستان مشكل اصلي با تراز كردن متن در وسط جدول است. هنگامي كه از خصوصيت justify در CSS استفاده مي شود متن تراز مي شود ولي در سمت چپ جدول قرار مي گيرد!
آيا اين امكان وجود دارد كه متن در وسط جدول قرار بگيرد و تراز باشد؟
HTML: 
<!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" xml:lang="en" lang="en">
<head>
<title>Table test</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<style type="text/css">
body {
  margin: 0;
  padding: 0;
  background-color: #ffffff;
  font-family: "tahoma", arial, sans-serif;
  font-size: 12px;
}
#global {
  width: 921px;
  height: 500px;
  margin: 0 auto;
}
.table1 {
  width: 921px;
  margin: 0 auto;
  margin-top: 50px;
}
.table1 ul {
  list-style: none;
  margin: 0;
  padding: 0;
  float: left;
  border-top: 1px solid #000000;
  border-left: 1px solid #000000;
  border-bottom: 1px solid #000000;
}
.table1 li {
  display: inline;
  float: left;
  width: 449px;
  padding: 5px;
  background-color: #0000ff;
  color: #ffffff;
  font: bold 12px "tahoma", arial, sans-serif;
  text-align: center;
  text-decoration: none;
  border-right: 1px solid #000000;
}
.table2 {
  width: 921px;
  margin: 0 0 5px 0;
}
.table2 ul {
  list-style: none;
  margin: 0;
  padding: 0;
  float: left;
  border-top: none;
  border-left: 1px solid #000000;
  border-bottom: 1px solid #000000;
}
.table2 li {
  height: 60px;
  display: inline;
  float: left;
  width: 449px;
  padding: 5px;
  color: #ffffff;
  font: bold 12px "tahoma", arial, sans-serif;
  text-align: center;
  text-decoration: none;
  border-right: 1px solid #000000;
}
</style>
</head>
<body>
<div id="global">
<div class="table1">
<ul>
<li>table1</li>
<li>table2</li>
</ul>
</div>
<div class="table2">
<ul>
<li>
<a title="test" target="_blank" href="http://www.test.com/">qqqwwweeerrr</a><br />
<a title="test" target="_blank" href="http://www.test.com/">qqq</a><br />
<a title="test" target="_blank" href="http://www.test.com/">qqqwww</a><br />
<a title="test" target="_blank" href="http://www.test.com/">qqqwwweeerrrttt</a>
</li>
<li>
<a title="test" target="_blank" href="http://www.test.com/">aaasssdddfff</a><br />
<a title="test" target="_blank" href="http://www.test.com/">aaa</a><br />
<a title="test" target="_blank" href="http://www.test.com/">aaasss</a><br />
<a title="test" target="_blank" href="http://www.test.com/">aaasssdddfffggg</a>
</li>
</ul>
</div>
</div>
</body>
</html>
 
آخرین ویرایش:
amirabbas_p30magazine

amirabbas_p30magazine

Member
تا اونجا که می دونم نمیشه اینکار رو کرد. شما میتونید از همون مقدار center برای text-align استفاده کنید. نمیشه که متن هم تراز باشه و هم وسط چین باشه
 
echessdesign

echessdesign

مدیر انجمن طراحی وب
درود بر شما
شما می تونید تا آنجا که نیاز است به BOX داخلی خود Padding یکسان از چپ و راست دهید، سپس متن داخل li ار ترازی برابر justify دهید:
HTML: 
<!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>Untitled 1</title>
</head>

<body>
<div style="padding:10px 30px; background:silver; width:300px;">
<p style="text-align:justify">
Insert a simple piece of our code on your web page or blog and you will be able to analyse and monitor all the visitors to your website in real-time!
</p>
</div>
</body>

</html>
 
echessdesign

echessdesign

مدیر انجمن طراحی وب
دوست عزیز
شما می خواهید متونی که در تگ li است، تراز justify پیدا کند؟
 
آخرین ویرایش:
echessdesign

echessdesign

مدیر انجمن طراحی وب
کافیه که شما به ul خصیصه padding بدید و برای li خصیصه متن آن را برابر justify قرار دهید.
مهم آن است که خود شما پس از درک این مسعله، موفق به حل این مشکل شوید.
پاینده باشید.
 
echessdesign

echessdesign

مدیر انجمن طراحی وب
بفرمایید:
HTML: 
<!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" xml:lang="en" lang="en">

<head>
<title>Table test</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />

<style type="text/css">
body {
  margin: 0;
  padding: 0;
  background-color: #ffffff;
  font-family: "tahoma", arial, sans-serif;
  font-size: 12px;
}

#global {
  width: 921px;
  height: 500px;
  margin: 0 auto;
}

.table1 {
  width: 900px;
  margin: 0 auto;
  margin-top: 50px;
}

.table1 ul {
  list-style: none;
  margin: 0;
  padding: 0;
  float: left;
  border-top: 1px solid #000000;
  border-left: 1px solid #000000;
  border-bottom: 1px solid #000000;
  padding:0 20px;
}

.table1 li {
  display: inline;
  float: left;
/*  width: 449px; */
  padding: 5px;
  background-color: #0000ff;
  color: #ffffff;
  font: bold 12px "tahoma", arial, sans-serif;
  text-align: justify;
  text-decoration: none;
  border-right: 1px solid #000000;
  background:aqua;
}
.table2 {
  width: 900px;
  margin: 0 0 5px 0;
}
.table2 ul {
  list-style: none;
  margin: 0;
  padding: 20px;
  float: left;
  border-top: none;
  border-left: 1px solid #000000;
  border-bottom: 1px solid #000000;
  background:red;
}
.table2 li {
  height: 60px;
  display: inline;
  float: left;
/*  width: 449px; */
  padding: 5px;
  color: #ffffff;
  font: bold 12px "tahoma", arial, sans-serif;
  text-align: justify;
  text-decoration: none;
  border-right: 1px solid #000000;
  text-align:justify;
}
.table2 li a{
	text-decoration:none;
	color:#000;
	display:block;
	margin:5px 0;
}
</style>

</head>

<body>
<div id="global">
<div class="table1">
<ul>
<li>Insert a simple piece of our code on your web page or blog and you will be able to analyse and monitor all the visitors to your website in real-time</li>
<li>Insert a simple piece of our code on your web page or blog and you will be able to analyse and monitor all the visitors to your website in real-time</li>
</ul>
</div>
<div class="table2">
<ul>
<li>
<a title="test" target="_blank" href="http://www.test.com/">Insert a simple piece of our code on your web page or blog and you will be able to analyse and monitor all the visitors to your website in real-time</a><br />
<a title="test" target="_blank" href="http://www.test.com/">Insert a simple piece of our code on your web page or blog and you will be able to analyse and monitor all the visitors to your website in real-time</a><br />
<a title="test" target="_blank" href="http://www.test.com/">qqqwww</a><br />
<a title="test" target="_blank" href="http://www.test.com/">qqqwwweeerrrttt</a>
</li>
<li>
<a title="test" target="_blank" href="http://www.test.com/">aaasssdddfff</a><br />
<a title="test" target="_blank" href="http://www.test.com/">aaa</a><br />
<a title="test" target="_blank" href="http://www.test.com/">aaasss</a><br />
<a title="test" target="_blank" href="http://www.test.com/">aaasssdddfffggg</a>
</li>
</ul>
</div>
</div>
</body>
</html>
 
echessdesign

echessdesign

مدیر انجمن طراحی وب
بفرمایید:
HTML: 
<!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" xml:lang="en" lang="en">

<head>
<title>Table test</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />

<style type="text/css">
body {
  margin: 0;
  padding: 0;
  background-color: #ffffff;
  font-family: "tahoma", arial, sans-serif;
  font-size: 12px;
}

#global {
  width: 921px;
  height: 500px;
  margin: 0 auto;
}

.table1 {
  width: 921px;
  margin: 0 auto;
  margin-top: 50px;
}

.table1 ul {
  list-style: none;
  margin: 0;
  padding: 0;
  float: left;
  border-top: 1px solid #000000;
  border-left: 1px solid #000000;
  border-bottom: 1px solid #000000;
}

.table1 li {
  display: inline;
  float: left;
  width: 449px;
  padding: 5px;
  background-color: #0000ff;
  color: #ffffff;
  font: bold 12px "tahoma", arial, sans-serif;
  text-align: center;
  text-decoration: none;
  border-right: 1px solid #000000;
}

.table2 {
  width: 921px;
  margin: 0 0 5px 0;
}

.table2 ul {
  list-style: none;
  margin: 0;
  padding: 0;
  float: left;
  border-top: none;
  border-left: 1px solid #000000;
  border-bottom: 1px solid #000000;
}

.table2 li {
  height: 60px;
  display: inline;
  float: left;
  width: 419px;
  padding: 5px;
  color: #ffffff;
  font: bold 12px "tahoma", arial, sans-serif;
  text-align: center;
  text-decoration: none;
  border-right: 1px solid #000000;
  padding:0 20px;
}
.table2 li a, .table2 li a:visited {
	display:block;
	text-align:justify;
	color:red;
}
.table2 li a:hover {
	text-align:justify;
	text-decoration:none;
}
</style>

</head>

<body>
<div id="global">
<div class="table1">
<ul>
<li>table1</li>
<li>table2</li>
</ul>
</div>
<div class="table2">
<ul>
<li>
<a title="test" target="_blank" href="http://www.test.com/">Insert a simple piece of our code on your web page or blog and you will be able to analyse and monitor all the visitors to 
our your </a><br />
<a title="test" target="_blank" href="http://www.test.com/">Insert a simple piece of our code on your web page or blog and you will be able to analyse and monitor all the visitors to your </a><br />
<a title="test" target="_blank" href="http://www.test.com/">Insert a simple piece of our code on your web page or blog and you will be able to analyse and monitor all the visitors to your </a><br />
<a title="test" target="_blank" href="http://www.test.com/">Insert a simple piece of our code on your web page or blog and you will be able to analyse and monitor all the visitors to your </a>
</li>
<li>
<a title="test" target="_blank" href="http://www.test.com/">aaasssdddfff</a><br />
<a title="test" target="_blank" href="http://www.test.com/">aaa</a><br />
<a title="test" target="_blank" href="http://www.test.com/">aaasss</a><br />
<a title="test" target="_blank" href="http://www.test.com/">aaasssdddfffggg</a>
</li>
</ul>
</div>
</div>
</body>
</html>
 
P

Peter Pro

Member
عالي بود echessdesign عزيز
از همكاري صميمانه شما تشكر مي كنم :)
 
آخرین ویرایش:
برای ارسال پاسخ شما باید وارد سیستم شوید.

آخرین مطالب مجیدآنلاین

جدیدترین ارسال ها

بالا