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
2 answers
solution1
0 2018-03-23 05:09:59
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.
solution2
0 ACCPTED 2018-03-23 05:22:11
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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.