• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

question-closed HTML - wyśrodkowanie div'a

Cloud VPS
0 głosów
1,174 wizyt
pytanie zadane 24 czerwca 2017 w HTML i CSS przez dziadek Początkujący (440 p.)
zamknięte 24 czerwca 2017 przez dziadek

Witam,

to jest moja strona i chce, aby POST był wyśrodkowany, próbowałem takich rzeczy jak margin-left: auto;, left: 50%;, ale nie działa. 

To jest plik base.html

{% load staticfiles %}
<html>
    <head>
        <title>Simple Django Blog</title>
        <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
        <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
        <link href='//fonts.googleapis.com/css?family=Lobster&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
        <link rel="stylesheet" href="{% static 'blog/css/blog.css' %}">
    </head>
    <body>
        <div class="page-header">
            <h1><a href="/">Simple Django Blog</a></h1>
        </div>
        <div class="content container">
            <div class="row">
                <div class="col-md-8">
                {% block content %}
                {% endblock %}
                </div>
            </div>
        </div>
    </body>
</html>

A tutaj plik blog.html

{% extends "blog/base.html" %}

{% block content %}
	{% for post in object_list %}
		<div class="post">
	        <div class="date">
	            {{ post.date }}
	        </div>
	        <h1><a href="/blog/{{post.id}}">{{ post.title }}</a></h1>
	        <p>{{ post.body|safe|linebreaksbr }}</p>
    	</div>
	{% endfor %}
{% endblock %}

A oto plik blog.css

.page-header {
    background-image: url("/static/blog/img/bg.jpg");
    margin-top: 0;
    text-align: center;
    padding: 20px 20px 20px 40px;
}

.page-header h1, .page-header h1 a, .page-header h1 a:visited, .page-header h1 a:active {
    color: #ffffff;
    font-size: 36pt;
    text-decoration: none;
}

Z góry dziękuję za pomoc.

komentarz zamknięcia: Problem został rozwiązany.

3 odpowiedzi

+1 głos
odpowiedź 24 czerwca 2017 przez surfeliza Stary wyjadacz (11,260 p.)
wybrane 24 czerwca 2017 przez dziadek
 
Najlepsza
Skoro korzystasz z boostrapa to suma kolumn musi równać się 12.

Szerokość tego diva odjąć te 12 i offset po jednej i drugiej stronie po połowie (http://getbootstrap.com/css/ ---> Offsetting columns).
0 głosów
odpowiedź 24 czerwca 2017 przez imklau Nałogowiec (42,090 p.)

text-align: center ?

komentarz 24 czerwca 2017 przez dziadek Początkujący (440 p.)
Próbowałem, wyśrodkowany zostaje tylko tekst i nie jest on na samym środku strony.
komentarz 24 czerwca 2017 przez imklau Nałogowiec (42,090 p.)
a co Ty chciałeś wyśrodkować? ten napis "POST" tak? i gdzie ma być? na środku artykułu?
komentarz 24 czerwca 2017 przez dziadek Początkujący (440 p.)
rzeczywiście, źle się wyraziłem, chciałem wyśrodkować cały artykuł.
komentarz 24 czerwca 2017 przez imklau Nałogowiec (42,090 p.)
no więc dla całego artyukułu daj text-align: center
0 głosów
odpowiedź 24 czerwca 2017 przez piotrsz109 Stary wyjadacz (13,730 p.)

Dla post zastosuj:

margin-left:auto;
margin-right: auto;

 

komentarz 24 czerwca 2017 przez dziadek Początkujący (440 p.)
Próbowałem, również nic.
komentarz 24 czerwca 2017 przez piotrsz109 Stary wyjadacz (13,730 p.)
Pokaż cały plik css i cały html z blog.html

Podobne pytania

0 głosów
2 odpowiedzi 309 wizyt
0 głosów
1 odpowiedź 738 wizyt
pytanie zadane 19 września 2016 w HTML i CSS przez DariuszH Gaduła (3,100 p.)
0 głosów
2 odpowiedzi 1,322 wizyt
pytanie zadane 19 stycznia 2017 w HTML i CSS przez agit45 Obywatel (1,110 p.)

93,487 zapytań

142,420 odpowiedzi

322,771 komentarzy

62,902 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj

Kursy INF.02 i INF.03
...