Προς το περιεχόμενο

Κεντράρισμα

Uberalles_gr

Από τον Uberalles_gr
στο Web Design - Development

Προτεινόμενες αναρτήσεις

Uberalles_gr Grand Master

Uberalles_gr

Δημοσ.
Δημοσ.

καλησπέρα παιδιά.

 

Θέλω κάτι πολύ απλό που όμως με έχει δυσκολέψει , μην πω μου έχει σπάσει τα νεύρα:mad:

 

Θέλω σε μία σελίδα, να μην έχω τίποτα άλλο παρά μόνο ένα κείμενο (5 λέξεις δεν είναι παραπάνω), στοιχισμένο στην μέση ακριβώς της οθόνης (στην μέση και κατά ύψος και κατά πλάτος). Και βέβαια, σε οποιαδήποτε ανάλυση εάν το βάλω να είναι πάντα στο κέντρο.

  • Απαντ. 30
  • Δημ.
  • Τελ. απάντηση
andrip Grand Master

andrip

Δημοσ.
Δημοσ.

εδώ είναι η λύση σου

 

><head>
<style>
[b]
.box { display: table; width: 100%; height: 100%; background-color:#ccc;}
.box p { display: table-cell; vertical-align: middle; text-align: center; } [/b]

</style>
</head>
<body>
<div class="box">
<p>This text is centered</p>
</div>
</body>

ΠάρηςΓ Grand Master

ΠάρηςΓ

Δημοσ.
Δημοσ.

Βασικα το table-cell δουλεύει μονο σε explorer 8 η σε firefox κ τα συναφη..

Βασικα πριν λιγες μερες εκανα κατι παρομιο ακολουθοντας οτι δειχνει το λινκ παραπάνω...

Η πιο απλη μεθοδος που σκεφτομαι τωρα ειναι να φτιαξεις ενα ταβλε με μια γραμμη και ενα κελί και να βαλεις table height 100% και το κειμενο μεσα..

 

><!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>
<style type="text/css">
<!--
body, html {
height: 100%;
margin:0;
padding:0;
font-family: Verdana, Geneva, sans-serif;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<body style="height:100%">
<table width="100%" height="100%" border="1" cellspacing="0" cellpadding="0">
 <tr>
   <td align="center">Σκληρο Παγωτο το τρώω και μου αρέσει παρα πολύ</td>
 </tr>
</table>
</body>
</html>

 

---------- Το μήνυμα προστέθηκε στις 20:25 ----------

 

Υ.Γ Αυτο ειναι πιστευω καλο για κειμενο και Inline elements οχι για Block elements ειναι fail..

Θελω και γνωμες...

hartzoua Proficient

hartzoua

Δημοσ.
Δημοσ.

Αν και θεωρητικά είναι λάθος ο καλύτερος και πιο εύκολος τρόπος είναι αυτός που προτείνει ο Πάρης με to table. Το div δεν υποστηρίζει την ιδιότητα vertical-align. Οπότε, ο σκοπός αγιάζει τα μέσα :-)

Uberalles_gr Grand Master

Uberalles_gr

Δημοσ.
  • Μέλος
Δημοσ.

Ευχαριστώ ΠάρηςΓ , δουλεύει άψογα !

 

Antonisid, εάν μεγαλώσεις την ανάλυση δεν κεντράρει στην μέση την οθόνης σε αντίθεση με τον κώδικα του Πάρη

fromaz Proficient

fromaz

Δημοσ.
Δημοσ.

Το vertical alignment είναι γελοιωδώς απλό και δεν χρειάζονται ούτε tables ούτε να ξεγελάσουμε τη μηχανή αλλάζοντας το display property ούτε περίπλοκο markup.

 

><!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" xml:lang="en" lang="en">
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   <title>Centering Test</title>
   <style>
   body
   {
       margin      : 0;
   }
   .centered
   {
       position    : absolute;
       top         : 50%;
       width       : 100%;
       text-align  : center;
   }
   </style>
</head>
<body>
<div class="centered">I am centered!</div>
</body>
</html>

 

Όλη η δουλειά γίνεται με το absolute positioning και την ιδιότητα top. Αν γνωρίζουμε το ύψος του div, τότε θέτουμε αρνητικό top margin ίσο με το μισό του ύψους και έχουμε pixel perfect vertical centering. Στην περίπτωση της μιας γραμμής κειμένου μπορούμε, πχ, να βάλουμε "-.5em" (εφόσον το κείμενο είναι 1em).

 

Αυτό ισχύει και για images (των οποίων το ύψος είναι γνωστό) με τη μόνη προσθήκη του horizontal centering με τη γνωστή μέθοδο του auto δεξί-αριστερού margin.

antonisid Crazy Insomniac

antonisid

Δημοσ.
Δημοσ.
Κεντράρισμε στο ύψος είναι δίσκολο στην HTML.

Με javascript μόνο μπορείς να το καταφέρεις 100%.

 

πλεον δεν ειναι τοσο δυσκολο.με css γινετσι ευκολα :

 

position:absolute;

top:50%;

StavrosD Crazy Insomniac

StavrosD

Δημοσ.
Δημοσ.

Έχεις ένα παράδειγμα;

Επειδή είχα και εγώ αντίστοιχο πρόβλημα πριν 4 χρόνια, δεν είχα βρει άκρη.

Στις προδιαγραφές του HTML και CSS ήταν το πρόβλημα.

Προσπαθούσα να κεντράρω ένα αντικείμενο σε ένα div στο οποίο είχα δόσει 100% height & width.

Μετά έδωσα 100% height και στα parent του (form, body, html) αλλά μάταια.

Το top element δεν είναι το παράθυρο του browser ώστε να πιάσει όλο το παράθυρο, αλλά το ύψος του ορίζεται από το περιεχόμενο.

Μόνο με margin=0 ίσως υπάρχει λύση.

antonisid Crazy Insomniac

antonisid

Δημοσ.
Δημοσ.
Antonisid,

δοκίμασε αντί για μία γραμμή κειμένου να βάλεις καμιά δεκαριά!!!

 

Βασικά Div έχω προσπαθησει να βάλω στο κέντρο οχι κέιμενο.Δοκιμασε το κειμενο να το βαλεις μεσα σ ενα Div.

Αρχειοθετημένο

Αυτό το θέμα έχει αρχειοθετηθεί και είναι κλειστό για περαιτέρω απαντήσεις.

Προς την λίστα θεμάτων
  • Δημιουργία νέου...