1 reply [Last post]
JuddH99
JuddH99's picture
Offline
newbie
Last seen: 15 weeks 3 days ago
Timezone: GMT-5
Joined: 2018-08-30
Posts: 1
Points: 4

Hi, I have attached my HTML and CSS files. Can you look at them and tell me how I can get the 3 images to center vertically and stay centered horizontally? I've tried everything I could find but none of it worked. I'm fairly new to all this.

Thanks,

AttachmentSize
LocalSupportHTML.txt408 bytes
LocalSupportCSS.txt898 bytes
gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 14 hours 44 min ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9716
Points: 3792

A different approach

1) I have never thought much of image replacements for text. It simply causes problems for your visitors with accessibility issues. My approach here is purely textual.

2) Your use of non-semantic markup also limits accessibility. Many assistive technologies and non-graphical browsers (consider Google) depend on markup for determining the proper hierarchy of the information.

3) Since I have retired, and flex came after that retirement, I lack enough familiarity to really go that way where accessibility and responsive layouts are concerned.

I used the UL as my container, as you have a list of three elements. All sizes are in em measures which means the page adjusts itself to the default font sizes of the users' browsers. It doesn't matter how cool the graphic designer thinks his choices of fonts and sizes are if the visitor has difficulty reading it. Using relative measures also means the page automatically reflows itself as the viewport size or the default values change.

See if this code works for you. Note that there are only four CSS rules sets needed specific to your issue.

<!DOCTYPE HTML>
<html lang="en"
  <head>
    <meta charset="utf-8">
    <meta content=
    "width=device-width, height=device-height, initial-scale=1"
          name="viewport">
    <title>
      Test document
    </title>
 
    <style media="screen">
    /*<![CDATA[*/
 
    body, html {
	font: 100%/1.5 sans-serif;
	margin:0;
	padding: 0;
    }
 
    p {
	font-size: 1em;
    }
 
    h1, h2, h3 {
	font-family: serif;
    }
 
    h1 {
	text-align: center;
    }  
 
/* end boiler plate */
 
    ul#LocalLinks {
	list-style-type: none;
	margin: 1.25em auto;
	padding: 0;
	text-align: center;
    }
 
    #LocalLinks li {
	background-color: #eee;
	border: 1px solid black;
	border-radius: 1em;
	display: inline-block;
	margin: 0 1.25em 1.25em;
	padding: 1.25em;
	vertical-align: middle;
	width: 8em;
    }
 
    #LocalLinks li a {
	color: black;
	opacity: .5;
	text-decoration: none;
    }
 
    #LocalLinks li a:hover {
	opacity: 1.0;
	text-decoration: underline;
	}
 
    /*]]>*/
    </style>
  </head>
 
  <body>
    <h1>
      A horizontal list with h &amp; v centering
    </h1>
 
    <ul id="LocalLinks">
      <li>
	<a href="https://forms.elkinswholesale.com/employment-application/">
	  Employment Application
	</a>
      </li>
 
      <li>
	<a href="https://forms.elkinswholesale.com/new-customer/">
	  New Customer Application
	</a>
      </li>
 
      <li>
	<a href="https://forms.elkinswholesale.com/donation-request/">
	  Community Support
	</a>
      </li>
    </ul>
  </body>
</html>

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.