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

Css πρόβλημα

rafinos

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

 Share

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

rafinos Grand Master

rafinos

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

Καλησπέρα παιδιά!

Προσπαθώ να κεντράρω ένα div, αλλά με position: fixed ή absolute μου προσθέτει έξτρα κενό στα δεξιά και δεν μπορώ να καταλάβω το λόγο. 

Ο κώδικας είναι παρακάτω. 

(Για να σας προλάβω γνωρίζω ότι υπάρχει η επιλογή offset στο grid system του bootstrap απλά θέλω να έχω ένα κενό div ενδιάμεσα στα γωνιακά κουμπιά του παρακάτω κώδικα) 

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Memory Game</title>
    <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css" />
    <link rel="stylesheet" type="text/css" href="font-awesome/css/font-awesome.min.css" />
    <style>
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body{
            width: 100vw;
            height: 100vh;
            background-color: #63bcae;
            overflow: hidden;
        }

        a{
            display: block !important;
            font-weight: bold !important;
			background-color: #fff !important;
			border: none !important;
			color: #333 !important;
        }

		#logo{
			margin-bottom: 10px;
		}

		.no-margin{
		    padding: 0 !important;
		    margin: 0 !important;
		}

		.right-side-buttons{
            background-color: #fff;
            border-top-left-radius: 5px;
            border-bottom-left-radius: 5px;
		}

		.left-side-buttons{
		    background-color: #fff;
            border-top-right-radius: 5px;
            border-bottom-right-radius: 5px;
		}

		.extra-padding{
		    padding-top: 5px !important;
		    padding-bottom: 5px !important;
		}

		.custom-margin{
		    padding: 0 !important;
		    margin: 0 !important;
		    margin-top: 10px !important;
		    margin-bottom: 10px !important;
		}

        .vertical-align{
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
        }
    </style>
</head>
<body>
    <div id="logo">
        <img src="images/logo.png" class="img-responsive">
    </div>
    <div class="container-fluid no-margin vertical-align">
        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 custom-margin">
            <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2 no-margin text-center">
                <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 no-margin left-side-buttons extra-padding">
                    <a href="https://tade.com"><i class="fa fa-globe fa-3x" aria-hidden="true"></i></a>
                </div>
            </div>
            <div class="col-xs-8 col-sm-8 col-md-8 col-lg-8">
                &nbsp;
            </div>
            <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2 no-margin text-center">
                <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 no-margin right-side-buttons extra-padding">
                    <a href="https://www.facebook.com/tade/"><i class="fa fa-facebook fa-3x" aria-hidden="true"></i></a>
                </div>
            </div>
        </div>
        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 custom-margin">
            <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2 no-margin text-center">
                &nbsp;
            </div>
            <div class="col-xs-8 col-sm-8 col-md-8 col-lg-8">
                <a class="btn btn-default btn-lg" href="game_choices.html"><span class="glyphicon glyphicon-chevron-right"></span>&nbsp;Play&nbsp;<span class="glyphicon glyphicon-chevron-left"></span></a>
            </div>
            <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2 no-margin text-center">
                &nbsp;
            </div>
        </div>
        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 custom-margin">
            <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2 no-margin text-center">
                <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 no-margin left-side-buttons extra-padding">
                    <a href="mailto:[email protected]"><i class="fa fa-envelope fa-3x" aria-hidden="true"></i></a>
                </div>
            </div>
            <div class="col-xs-8 col-sm-8 col-md-8 col-lg-8">
                &nbsp;
            </div>
            <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2 no-margin text-center">
                <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 no-margin right-side-buttons extra-padding">
                    <a href="#"><i class="fa fa-trophy fa-3x" aria-hidden="true"></i></a>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

 

XPHSTOS_ Experienced

XPHSTOS_

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

1) Ποιο είναι το element που θέλεις να κεντράρεις?
2) Θέλεις να το κεντράρεις, οριζόντια, κάθετα ή και τα 2?

Θα σου πρότεινα να απλοποιήσεις τον κώδικα γιατί βλέπω ένα κάρο div μέσα σε άλλα div τα οποία φέρουν κλάσεις του Bootstrap αλλά δεν είναι μέσα σε κάποιο row.
Θα βοηθούσε να μας δείξεις με κάποια εικόνα τι θέλεις να κάνεις ή κάποιο έτοιμο παράδειγμα.

Δες λίγο αυτό και πες μας αν είναι αυτό που ήθελες... 
https://codepen.io/anon/pen/QJKOja?editors=0100

(Γενικά ανέβαζε τον κώδικα σου σε κάποιο codepen ή jsfiddle γιατί δεν βοηθάει το code-paste)

rafinos Grand Master

rafinos

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

Το element που θέλω να είναι κεντραρισμένο κάθετα είναι το  

<div class="container-fluid no-margin vertical-align">

Και παρακάτω η φώτο. Αν ας πούμε βγάλω το class vertical-align τότε απλά επανέρχεται κάτω από την εικόνα χωρίς το κενό στα δεξιά.

Τα bootstrap divs πρέπει να είναι αναγκαστικά μέσα σε row;

 

Χωρίς τίτλο.png

XPHSTOS_ Experienced

XPHSTOS_

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

Εσύ δηλαδή θέλεις να πετύχεις την "σκακιέρα" και να είναι κεντραρισμένο στο κέντρο της οθόνης?

Σκακιέρα εννοώ, τα 4 μικρά κουμπιά στα άκρα και το μεγάλο "play" στη μέση.. σωστά?

  • Like 1
rafinos Grand Master

rafinos

Δημοσ.
  • Μέλος
Δημοσ. (επεξεργασμένο)
12 λεπτά πριν, XPHSTOS_ είπε

Εσύ δηλαδή θέλεις να πετύχεις την "σκακιέρα" και να είναι κεντραρισμένο στο κέντρο της οθόνης?

Σκακιέρα εννοώ, τα 4 μικρά κουμπιά στα άκρα και το μεγάλο "play" στη μέση.. σωστά?

Ναι ακριβώς αυτό.

 

*** Το έκανα

Έφτιαξα το παρακάτω class 

.buttons-container{
			width: 100%;
			margin: 0;
			padding: 0;
			position: absolute;
            top: 50%;
            transform: translateY(-50%);
		}

και έκανα το element ως εξής: 

<div class="buttons-container">

 

Μάλλον επειδή πουθενά δεν δηλωνόταν το width με το που έμπαινε το position γινόταν η ζημιά. 

Επεξ/σία από rafinos
XPHSTOS_ Experienced

XPHSTOS_

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

Δες αυτό.
https://codepen.io/anon/pen/aQmVaO

Δεν χρησιμοποίησα το δικό σου γιατί δεν χρειάζονται όλα αυτά τα div κλπ.
Είναι αρκετά απλό αυτό που ζητάς.
Για την ακρίβεια προσπάθησα να το κάνω με το bootstrap αλλά πραγματικά αντί να το κάνει πιο εύκολο το κάνει πιο δύσκολο.
Είναι γελοία όλα αυτά τα classes.. 😕

Δημιουργήστε ένα λογαριασμό ή συνδεθείτε για να σχολιάσετε

Πρέπει να είστε μέλος για να αφήσετε σχόλιο

Δημιουργία λογαριασμού

Εγγραφείτε με νέο λογαριασμό στην κοινότητα μας. Είναι πανεύκολο!

Δημιουργία νέου λογαριασμού

Σύνδεση

Έχετε ήδη λογαριασμό; Συνδεθείτε εδώ.

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