My text appears to the left of my centered image?


#1

Hey everyone! I'm currently trying to create a basic site layout and I have a problem with my image and text. I made my image a block element. and I used margin: auto; to center it. My problem is that my text acts inline. I know it is already inline but I even changed the Display property to block and theninline-block. I'm kind of confused. My code is below.

Also, here is a link to an online editor with my code: http://cssdeck.com/labs

(I'm new to this so anything helps!)


<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<link href="SiCreative.css" rel="stylesheet" type="text/css">
</head>
<body>
<h1>S.i. Creative</h1>

  <img src="https://i.ytimg.com/vi/m5d1FlSeF-M/maxresdefault.jpg">

<p>Test</p>




</body>
</html>

@charset "UTF-8";
/* CSS Document */
* {
	margin: 0;
	padding: 0;
}

html {
	font-size: 16px;
}

h1 {
    font-family: DIN Condensed, Avenir, serif;
	text-align: left;
	font-size: 4rem;
	background-color: #001828;
	color: white;
	padding-top: 12px;
	padding-left: 10px;
	border-style: solid;
	border-color: #001828;
	border-width: 10px;
	width: 100%;
	position: fixed;
	z-index: 1;
}

img {
	width: 50%;
	margin-left: auto;
	margin-right: auto;
	display: block;
	position: relative;
	top: 200px;
	border-style: solid;
	border-color: black;
	border-width: 0px 0px 4px 0px;
	padding: 0% 8% 10% 8%
}

p {
	display: block;
}

#2

What are you trying to achieve? You want the text under the image?


#3

Yes. I want it under the black line.


#4

well, you use top: 200px, this means everything is positioned first, and then the image is pushed down 200px, so the paragraph stays at the same position (ending up above the image)

you could use margin-top, this will also push elements below the image down

but then collapsing margin occurs, you can read about it here:

https://www.w3.org/TR/CSS2/box.html#collapsing-margins

see which is the best counter measurement for you.


#5

Thanks! I will definitely read up on it.


#6

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.