HTML & CSS Centering Text and Image Together

Question

I'm getting into the field of web design, and for practice purposes, I'm trying to create responsive HTML and CSS websites modeled after real websites so I only worry about the development, not the design. As of now, I'm redesigning apple.com. My problem is that in the apple.com navigation bar, the Apple logo is consistently around an inch away from the links to other parts of the site. As you resize the browser, it stays around an inch away. The problem is that on my (unfinished) version of the site, the apple logo stays fixed in one position as you resize the browser.

Here's my code:

html {
  font-size: 100%;
}

body {
  padding: 0;
  margin: 0;
}

@font-face {
  font-family: "San Francisco";
  font-weight: 400;
  src: url("https://applesocial.s3.amazonaws.com/assets/styles/fonts/sanfrancisco/sanfranciscodisplay-regular-webfont.woff");
}

.font {
  font-family: San Francisco;
}

.logo {
  position: absolute;
  left: 5em;
  top: .5em;
}

.center {
  display: inline;
  text-align: center;
}

.search {
  display: block;
  position: fixed;
  right: 1em;
  top: .7em;
}

header {
  list-style-type: none;
  word-spacing: 40px;
  background-color: #323232;
  height: 2.8em;
  width: 100%;
  position: fixed;
  opacity: .98;
}

.ul-header {
  margin: .8em;
}

.li-header {
  display: inline;
}

.a-header {
  text-decoration: none;
  color: white;
  font-family: San Francisco;
  font-size: 15px;
}

.iphoneximg {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.iphone {
  text-align: center;
  font-size: 3em;
  line-height: 0.5em;
}

.sayhello {
  text-align: center;
  font-size: 1.6em;
  line-height: 0;
  font-weight: 550;
}

@media(min-width: 1500px) {
  .iphoneximg {
    width: 50%;
  }
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Apple</title>
  <link rel="icon" href="Images/Apple.ico">
  <link rel="stylesheet" type="text/css" href="styles.css">
</head>

<body>
  <header>
    <div class="center">
      <img src="Images/Screenshot%20from%202018-03-20%2020-59-01.png" class="logo">
      <ul class="ul-header">
        <li class="li-header"><a href="#" class="a-header">Mac</a></li>
        <li class="li-header"><a href="#" class="a-header">iPad</a></li>
        <li class="li-header"><a href="#" class="a-header">iPhone</a></li>
        <li class="li-header"><a href="#" class="a-header">Watch</a></li>
        <li class="li-header"><a href="#" class="a-header">TV</a></li>
        <li class="li-header"><a href="#" class="a-header">Music</a></li>
        <li class="li-header"><a href="#" class="a-header">Support</a></li>
        <img src="Images/Search.png" class="search">
      </ul>
    </div>
  </header>
  <br><br><br><br><br><br><br><br><br>
  <section class="iphonex">
    <h1 class="font iphone">iPhone X</h1>
    <p class="font sayhello">Say hello to the future.</p>
    <img src="Images/iphone.png" width="76%" class="iphoneximg">
  </section>
  <section class="iphonex">
    <h1 class="font iphone">iPhone 8</h1>
    <p class="font sayhello">A new generation of iPhone.</p>
    <img src="Images/generation.jpg" width="76%" class="iphoneximg">
  </section>
</body>

</html>

Someone suggested this solution: How to horizontally center a <div> in another <div>? The problem is that I'm trying to figure out how to work with the differences between images and text to center them, so simply throwing them in a div won't work.

I've tried putting the text and the image in a div and centering it, % values, messing with the display property, and a few other things, but nothing seems to work.

I'm also a newbie web dev, so if there's anything else I should fix, feel free to let me know. Thanks, Lyfe

Possible duplicate of [How to horizontally center a
in another
?](https://stackoverflow.com/questions/114543/how-to-horizontally-center-a-div-in-another-div) — Selvam Elumalai, Mar 23 '18 at 04:44
Hey Selvam, this isn't a duplicate because images and text behave differently, and I'm trying to figure out how to work with that while centering them together. — Lyfe, Mar 23 '18 at 04:45
Can you share visual reference or screenshot...let me take a look! — Selvam Elumalai, Mar 23 '18 at 04:59

score 0 · Answer 1 · answered Mar 23 '18 at 05:09

if we have an actual look at the CSS and HTML of the apple page this is how you do it:

html:

<ul class="ac-gn-list">
 <li class="ac-gn-item ac-gn-apple">
  <a class="ac-gn-link ac-gn-link-apple" href="/" data-analytics-title="apple home" id="ac-gn-firstfocus">
    <span class="ac-gn-link-text">Apple</span>
 </a>
  </li>
  <li class="ac-gn-item ac-gn-item-menu ac-gn-mac">
   <a class="ac-gn-link ac-gn-link-mac" href="/mac/" data-analytics-title="mac">
    <span class="ac-gn-link-text">Mac</span>
   </a>
  </li>
  <li class="ac-gn-item ac-gn-item-menu ac-gn-ipad">
   <a class="ac-gn-link ac-gn-link-ipad" href="/ipad/" data-analytics-title="ipad">
    <span class="ac-gn-link-text">iPad</span>
   </a>
  </li>
                ... There are More...
 </ul>

css:

@media only screen and (max-width: 767px){#ac-globalnav .ac-gn-item-menu{
height:43px;
border-bottom:1px solid #333;
opacity:0;
pointer-events:none;
}

.ac-gn-apple{
    position:absolute;
    width:48px;
    top:0;
    left:50%;
    margin-left:-24px;
    text-align:center;
    z-index:1
}

Comment:

I would bet the

position:absolute;

does the trick, however, I cut out allot of the webkit code. If yo ureally want to make a dynamic page/responsive page, you need to learn the Bootstrap Library, it is honestly super easy to use and to start using. Makes everything dynamic and responsive.

Cybernetic · Accepted Answer · 2018-03-23T15:55:23.690

Run an inspect element on the Apple page and you'll see they place their image as another list element. You on the other hand are placing it outside your list.

Here is your code, with the Apple logo placed as the first list element:

<ul class="ul-header">
        <li class="li-header"><a href="#" class="a-header"><img src="apple_logo.png" width='20px'></a></li>
        <li class="li-header"><a href="#" class="a-header">Mac</a></li>
        <li class="li-header"><a href="#" class="a-header">iPad</a></li>
        <li class="li-header"><a href="#" class="a-header">iPhone</a></li>
        <li class="li-header"><a href="#" class="a-header">Watch</a></li>
        <li class="li-header"><a href="#" class="a-header">TV</a></li>
        <li class="li-header"><a href="#" class="a-header">Music</a></li>
        <li class="li-header"><a href="#" class="a-header">Support</a></li>
</ul>

EDIT

To ensure your apple logo aligns vertically with the other elements in your list, add this to your CSS:

#app_logo {
  margin-top: -10px;
}

.center ul img {
    vertical-align: middle;
}

Note I added an ID to the image. Also, your settings may be slightly different.

This solved my problem, however I now have a new one. The text is pushed down, and the images are pushed to the top. Here's a screenshot: http://ibb.co/d60rX7 — Lyfe, Mar 23 '18 at 14:55

HTML & CSS Centering Text and Image Together

2 Answers2