Kaworu
Active Coder
Hi.
I am working on a website. I have two divs (classes: centered-text and center-div - the first is supposed to center the text, the second pictures) and my CSS code for them is not working as intended.
The detailed problem is below, in SPOILER:
I really cannot guess why the code is not working. Any help would be appreciated ;-)
I am working on a website. I have two divs (classes: centered-text and center-div - the first is supposed to center the text, the second pictures) and my CSS code for them is not working as intended.
The detailed problem is below, in SPOILER:
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="auto-div">
<div class="basic-info">
<h1>Basic Information & Contact</h1>
<section>
<div class="centered-text">
<p><b>Text</b>: text</p>
<p><b>text</b>: text</p>
<p><b>text</b>: text</p>
<p><b>text</b>: text</p>
<p><b>text</b>: text</p>
<p><b>text</b>: text </p>
<p>text</p>
</div>
<hr>
<div class="center-div">
<p><span id="social-links">Social links</span></p>
<!-- <div class="center-div"> -->
<img alt="LinkedIn" title="LinkedIn" width="40px" src="IMG/linkedin-colored.svg">
<img alt="GitHub" title="GitHub" width="40px" src="IMG/github-colored.svg">
<img alt="DeviantArt" title="DeviantArt" width="40px" src="IMG/deviantart-colored.svg">
<!-- </div> -->
</div>
</section>
</div>
</div>
</body>
</html>@import "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css";
:root
{
/* background color */
--bcolor: #F1F1E6;
/* front color */
--fcolor: #191970;
/*new front color: #191970 */
/*old front color: #3D486B */
/* th (table header) color */
--thcolor: #b6abce;
/*new th color: #4B9CD3 */
/*old th color: #C5CEC2 */
}
body
{
background-color: var(--bcolor);
color: var(--fcolor);
margin: 0;
padding: 0;
font-size: 20px;
}
.auto-div
{
margin-left: auto;
margin-right: auto;
width: 1250px;
border: 3px solid var(--fcolor);
box-shadow: 0 0 10px 10px var(--fcolor);
}
h1
{
text-align: center;
}
h2
{
text-align: center;
}
h3
{
text-align: center;
}
/****************************
* NEED TO WORK ON THESE !!!
* **************************/
.centered-text:
{
text-align: center;
}
.center-div:
{
display: flex;
justify-content: center;
}
hr
{
border: 1px solid var(--fcolor);
width: 65%;
}
.basic-info
{
border-top-style: solid;
border-top-color: var(--fcolor);
border-top-width: 3px;
border-bottom-style: solid;
border-bottom-color: var(--fcolor);
border-bottom-width: 3px;
}
:root
{
/* background color */
--bcolor: #F1F1E6;
/* front color */
--fcolor: #191970;
/*new front color: #191970 */
/*old front color: #3D486B */
/* th (table header) color */
--thcolor: #b6abce;
/*new th color: #4B9CD3 */
/*old th color: #C5CEC2 */
}
body
{
background-color: var(--bcolor);
color: var(--fcolor);
margin: 0;
padding: 0;
font-size: 20px;
}
.auto-div
{
margin-left: auto;
margin-right: auto;
width: 1250px;
border: 3px solid var(--fcolor);
box-shadow: 0 0 10px 10px var(--fcolor);
}
h1
{
text-align: center;
}
h2
{
text-align: center;
}
h3
{
text-align: center;
}
/****************************
* NEED TO WORK ON THESE !!!
* **************************/
.centered-text:
{
text-align: center;
}
.center-div:
{
display: flex;
justify-content: center;
}
hr
{
border: 1px solid var(--fcolor);
width: 65%;
}
.basic-info
{
border-top-style: solid;
border-top-color: var(--fcolor);
border-top-width: 3px;
border-bottom-style: solid;
border-bottom-color: var(--fcolor);
border-bottom-width: 3px;
}
I really cannot guess why the code is not working. Any help would be appreciated ;-)
