Οριζόντια στοίχιση text, ποίος είναι ο καλύτερος τρόπος;

Ας μάθουμε πως να κάνουμε τις σελίδες μας με στιλ. Τα Cascading Style Sheets είναι ο τρόπος για να το επιτύχουμε.

Συντονιστές: WebDev Moderators, Super-Moderators

Απάντηση
Άβαταρ μέλους
Mandingueiro
Δημοσιεύσεις: 270
Εγγραφή: 07 Φεβ 2006 19:26

Οριζόντια στοίχιση text, ποίος είναι ο καλύτερος τρόπος;

Δημοσίευση από Mandingueiro » 01 Δεκ 2011 16:48

Γειά σας παιδιά.

Θέλω να επιτύχω να στοιχίσω το text στο κέντρο των κουτιών που υπάρχει απο κάτω. Τα γκρι κουτιά υπάρχουν ήδη στο template μου, τα κόκκινα τα έβαλα για να καταλάβετε πού θέλω να στοιχίσω το text, και το text φυσικά είναι αυτό που θέλω να επιτύχω.

Ποιός είναι ο καλύτερος και πιο σωστός (cross-browser, σε όλες τις αναλύσεις, fluid) να το επιτύχω;

:)
Συνημμένα
Untitled-4.jpg
(12.54 KiB) Μεταφορτώθηκε 270 φορές

Άβαταρ μέλους
Mandingueiro
Δημοσιεύσεις: 270
Εγγραφή: 07 Φεβ 2006 19:26

Οριζόντια στοίχιση text, ποίος είναι ο καλύτερος τρόπος;

Δημοσίευση από Mandingueiro » 01 Δεκ 2011 16:54

Μέχρι στιγμής ο τρόπος που έχω βρεί και φαίνεται καλός είναι να βάλω τα 3 texts σε <span> με display: inline-block; και width:33% και text-align:center. Φαίνεται σωστό αλλά δεν είμαι σίγουρος ότι δουλεύει και σε άλλες αναλύσεις και ότι είναι ασφαλής τρόπος.

Επίσης αν βάλω width 33.3 , για μεγαλύτερη ακρίβεια, τότε το τελευταίο text πάει απο κάτω απ'το 1ο, σε νέα γραμμή.

Άβαταρ μέλους
fafos
Script Master
Δημοσιεύσεις: 6231
Εγγραφή: 30 Νοέμ 2004 03:09

Οριζόντια στοίχιση text, ποίος είναι ο καλύτερος τρόπος;

Δημοσίευση από fafos » 01 Δεκ 2011 18:43

den yparxei tropos me aplh css na vreis to width gia oles tis analyseis.. kati ta margins, kati ta paddings klp se kapoia(es) analysh tha sou xalane thn manestra.. mporeis omos na xrhsimopoihseis ligo ajax gia na ta deixneis pantou ta idia:

Κώδικας: Επιλογή όλων

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-7">
<meta http-equiv="Content-Style-Type" content="text/css">
<title></title>
<script src="http&#58;//code.jquery.com/jquery-latest.js"></script>
<script>
jQuery&#40;document&#41;.ready&#40;function &#40;&#41; &#123;
	var divwidth = $&#40;".divstyle"&#41;.outerWidth&#40;&#41;;// to width tou exoterikou div
	var liwidth = &#40;divwidth / 3&#41; - 32;//to width tou kathe li &#40;to width tou div dia 3, meion 10 pixels to margin, meion 20 pixels to padding, meion 2 pixels to border&#41;
	$&#40;'.listyle'&#41;.css&#40;'width', liwidth&#41;;//dinoume to teliko width sto li
&#125;&#41;;
</script>
<style type="text/css">
<!--
BODY
&#123;
	background-color&#58;#0080ff;
&#125;

.divstyle
&#123;

	width&#58;100%;
	position&#58;relative;
&#125;

.listyle
&#123;
	height&#58;300px;
	float&#58;left;
	position&#58;relative;
	display&#58;inline-block;
	background-color&#58;#fff;
	border&#58;1px solid #000;
	margin&#58;5px;
	padding&#58;10px;
&#125;

.ulstyle
&#123;
	list-style-type&#58;none;
	text-align&#58;center;
	position&#58;relative;
	margin&#58;0 auto;
	padding&#58;0;
&#125;


-->
</style>
</head>
<body>
<div class="divstyle">
	<ul class="ulstyle">
		<li class="listyle">
		<div>
			1
		</div>
		</li>
		<li class="listyle">
		<div>
			2
		</div>
		</li>
		<li class="listyle">
		<div>
			3
		</div>
		</li>
	</ul>
	<div style="clear&#58;both;">
	</div>
</div>
</body>
</html>
Οι πάνες και οι πολιτικοί πρέπει να αλλάζονται συχνά για τον ίδιο λόγο...

Απάντηση

Επιστροφή στο “CSS - Cascading Style Sheets”

Μέλη σε σύνδεση

Μέλη σε αυτήν τη Δ. Συζήτηση: Δεν υπάρχουν εγγεγραμμένα μέλη και 0 επισκέπτες