As I take on my first project in Django, I find myself grappling with how to center elements on my site. Specifically, I aim to create a div that encompasses all the content on the page, excluding the navigation bar. This div should be positioned perfectly in the middle of the screen and occupy 50% of the width. Additionally, all the content inside this div should also be centered. Despite trying various methods, I am still facing challenges in achieving this layout. Here is a glimpse of what I have implemented so far:
https://i.sstatic.net/WqLBu.png
Below is the template code:
<html>
<style>
body {
margin: 0;
padding: 0;
}
img[src="/media/images/crate_bar.png"] {
margin: 0;
padding: 0;
display: block;
width: 100%;
height: auto;
box-sizing: border-box;
}
img[src="/media/images/logo.png"] {
position: absolute;
display: block;
width: auto;
height: auto;
left: 50%;
transform: translateX(-50%);
top: 0;
}
#logo {
display: flex;
justify-content: center;
align-items: center;
text-align: center;
}
#main_container {
display: flex;
justify-content: center;
align-items: center;
}
#second_container {
display: flex;
justify-content: center;
align-items: center;
width: 50%;
}
</style>
<div id="logo">
<img src="/media/images/crate_bar.png">
<a href="{% url 'mainapp:home_view' %}"><img src="/media/images/logo.png" alt="logo"></a>
</div>
<h1>
{% if user.is_superuser %}
<a href="{% url 'mainapp:new_article' %}"><button type=" button">New article</button></a>
{% endif %}
{% block content %}
<div id="main_container">
<div id="second_container">
<ul>
{% for article in list_of_articles %}
{% if article.article_image %}
<img src="{{article.article_image.url }}" height="200" width="450">
{% endif %}
<p>{{article.publication_date}}</p>
<h1><a href="{% url 'mainapp:article_view' article.id %}">{{article.title}}</a></h1>
{% endfor %}
</ul>
</div>
{% endblock %}
</div>
</html>