How do I horizontally center text and an image?

I have been trying to move an image (logo.png) and text ("The Crazy Cat Lady") to the center of a page. I have already put the image and text inside a div container and typed text-align="center"; in style.css. Can somone please help me with this issue? My code is below.

HTML:

Expand|Select|Wrap|Line Numbers

 <!DOCTYPE html>
 
<html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link href="https://fonts.googleapis.com/css?family=Poppins:400,500&display=swap" rel="stylesheet"> <link rel="stylesheet" href="/CSS/style.css"/> <title>The Crazy Cat Lady</title> </head> <body> <header> <div class="logo-container"> <img src="img/logo.png" alt="logo"> <h4 class="logo">The Crazy Cat Lady</h4> </div> <nav> <ul class="nav-links"> <li><a class="nav-link" href="#">Pablo Picatso</a></li> <li><a class="nav-link" href="#">Tailay</a></li> <li><a class="nav-link" href="#">Lucky</a></li> </ul> </nav> </header> </body> </html>
 
CSS:
 
* {

margin: 5px;

padding: 0px;

box-sizing: border-box;

}

body {

font-family: 'Poppins', sans-serif;

}

header {

display: flex;

width: 90%;

height: 20vh;

margin: 0;

align-items: center;

}
 
.logo-container,nav-links{

display: flex;

text-align: center;

}

.logo-container {

flex: 1;

text-align: center;

}

.logo{

font-size: 150%;

font-weight: 600;

margin: auto;
 
}

li{

display: inline;

padding: 0px 30px 0px 30px;

position: relative;

top: 55px;

font-weight: 500;

}

nav {

flex: 2;

}

.nav-links{

justify-content: space-around;

list-style: none;

}

.nav-link{

color: #5f5f79;

font-size: 18px;

text-decoration: none;

}

img {

width: 125px;

height: auto;

align-self: center;

}

Dec 14 '19 #1

Subscribe Post Reply

4002

SioSio

272

256MB

To display in the center, use the <center> tag

Expand|Select|Wrap|Line Numbers

 
<center>

<img src="img/logo.png" alt="logo"> 

<h4 class="logo">The Crazy Cat Lady</h4> 

</center>

Jan 8 '20 #2

gits

5,390

Expert Mod 4TB

while this solution might work - its not the preferable one. for layout always use css while for structuring the content use html. that means - a part of the content is a heading or an image (html tags because this is what html is meant for) but how that is presented in the browser is a different task. Browsers can show it even differently. So for that layout tasks we have css - thus the center tag shouldn't even exist and was already deprecated in HTML4 (https://developer.mozilla.org/en-US/...Element/center).

the same can be achieved with css like for example:

Expand|Select|Wrap|Line Numbers

 <html>
 
  <style type="text/css">
 
    #centered-img {

      display: block;

      margin-left: auto;

      margin-right: auto;

    }
 
  </style>
 
<body>

  <img id="centered-img" src="https://upload.wikimedia.org/wikipedia/en/a/aa/Bart_Simpson_200px.png"/>

</body>

</html>

PS: since the OP was asking for img and text the following example extends the upper one for such a requirement:

Expand|Select|Wrap|Line Numbers

 <html>
 
  <style type="text/css">
 
  #centered-img {

    display: block;

    margin-left: auto;

    margin-right: auto;

  }
 
  #center-container {

    width: 100%;

    text-align: center;

  }
 
  </style>
 
<body>

  <div id="center-container">

    <img id="centered-img" src="https://upload.wikimedia.org/wikipedia/en/a/aa/Bart_Simpson_200px.png"/>

    The Crazy Cat Lady

  </div>

</body>

</html>

Jan 8 '20 #3

SioSio

272

256MB

Hi gits
Thank you for the information

Jan 9 '20 #4

gits

5,390

Expert Mod 4TB

you are welcome - a pretty good and short overview about how to use what for which purpose in creating websites can be found here:

https://www.codingdojo.com/blog/html...s-inforgraphic

this is just a simple overview though since today's webpages usually are not built in such a static way anymore. Modern single page applications mostly create their user interfaces with javascript and here some of the typical programming principles apply as well. But like there and here we can break it down to something like 'separation of concerns' at least - which is a good principle to apply whenever possible - since it structures the 'program' usually at least in a more easy understandable and maintainable way (even though HTML/CSS cant be seen as programming in a strict way).

Jan 9 '20 #5

Similar topics

How to float:center; an image in text?

by: Gustav Medler | last post by:

Css only offers float:right; and float:left; Is it possible, to center an image, floated around by text? Cross browser funcionality is needed for NS4.7, IE 5.x, Op 6.x, Moz 1.x, Konqu 3.x. I...

HTML / CSS

How to center an image using CSS in both IE and Mozzila

by: Mike | last post by:

We are using: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"...

HTML / CSS

How to center text in msgbox

by: Richard Cleaveland | last post by:

How to center text in msgbox: is this possible or do I have to do my own thing with a form? Dick

Microsoft Access / VBA

Center an image on a tab page

by: Sean | last post by:

Hi, I have a tab control containing few tab pages. On each tab pages, I put an image on the tab page's title bar (the area on top of a tab page, ie where tooltip will appear). If i put both...

C# / C Sharp

Text Image Component

by: Win, Pats | last post by:

Just wondering if anyone has ever seen a 3rd party component that facilitates the creation of text images. I know I can "roll my own" but was not wanting to reinvent the wheel. I searched...

ASP.NET

GD center text on a image

by: Krustov | last post by:

The following works fine - but would like to center the text . Whats the best way to do it ? . <?php $text=$kk;

PHP

Horizontally centering an image WITH a border

by: texvanwinkle | last post by:

"WITH a border" being the defining issue. Here's the deal: I'm new to CSS, but I've managed so far to center a single line of links at the top of my home page and center an image on the bottom of...

HTML / CSS

Center an image at the top of the page.

by: hyphenpipe | last post by:

I am going completely nutso here and I am sure someone will point me in the right direction. I am trying to center and image that is 780 pixels wide at the very top of my page, and for some reason...

HTML / CSS

vertically center text next to textarea

by: JackRbt | last post by:

I can do that if they're in a cell, but they're not. With CSS, I can center horizontally. Can I have text with is to the left of a textarea, and have the text vertically centered with respect to...

HTML / CSS

How do I center a image in CSS?

by: Jen Dha | last post by:

How do I center an image in CSS? I tried adding: align:center but that did not work it's an image wrapped by a div. <div style="align:center"> <img src=".."/> </div>

HTML / CSS

Migrating Website to Cloud - Emmanuel Katto

by: emmanuelkatto | last post by:

Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel

General

Navigating the Data Structures and Algorithms (DSA)

by: BarryA | last post by:

What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...

Algorithms / Advanced Math

Looking to do Android software development, any suggestions? Is flutter better?

by: nemocccc | last post by:

hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?

General

Is that possible of reading the .csv file in column wise and the column have different lengths ?

by: Sonnysonu | last post by:

This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...

C / C++

What is ONU?

by: marktang | last post by:

ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...

General

The easy way to turn off automatic updates for Windows 10/11

by: Hystou | last post by:

Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows...

Windows Server

AI Job Threat for Devs

by: agi2029 | last post by:

Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing,...

Career Advice

Access Europe - Using VBA to create a class based on a table - Wed 1 May

by: isladogs | last post by:

The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new...

Microsoft Access / VBA

Couldn’t get equations in html when convert word .docx file to html file in C#.

by: conductexam | last post by:

I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and...

C# / C Sharp