2 replies [Last post]
Coder_Trina
Coder_Trina's picture
Offline
newbie
Last seen: 3 years 27 weeks ago
Timezone: GMT-4
Joined: 2016-04-05
Posts: 2
Points: 3

So am I trying to centre text in between 2 images. The issue that I am having is that I can not get the text to align centre. You can see my code here:

https://jsfiddle.net/Coder_Trina/uhamw863/

You can also see a screen grab of the text with images here:

http://imgur.com/2ShMS8M

Any help on how to get the text centered would be greatly appreciated. Smile

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 hour 11 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9743
Points: 3822

One way to do it

<!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 type="text/css">
    /*<![CDATA[*/
 
    body {
	background-color: white;
	color: black;
	font: 100%/1.5 sans-serif;
	margin: 0  1.5em;
	padding: 0;}
 
    p {
	font-size: 1em;}
 
    .headcol-left {
	float: left; 
	margin-left: 5px;
	margin-top: 5px;
	margin-bottom: 2px;}
 
    .headcol-right { 
	float: right; 
	display: block;
	margin-right: 5px;
	margin-top: 5px;}
 
    #banner h1 {
	color: #FF0000;
	font-size: 2.5em;
	overflow: auto;
	text-align: center; }
 
    /*]]>*/ 
    </style>
  </head>
  <body>
    <div id="banner">
      <div class="headcol-left">
      	<img src="../Images/BI-flag.png" alt="Bisexual Pride flag" />	
      </div>
 
      <div class="headcol-right">
      	<img src="../Images/BI-flag.png" alt="Bisexual Pride flag" />	
      </div>
 
      <h1>
    	LGBTQ Media List - Bisexual Media - B
      </h1>
    </div>
  </body>
</html>
I think yoyur flags should be background images, and put lateral margins on the h1.

cheers,

gary

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

Coder_Trina
Coder_Trina's picture
Offline
newbie
Last seen: 3 years 27 weeks ago
Timezone: GMT-4
Joined: 2016-04-05
Posts: 2
Points: 3

Hello Gary, Thank you for the

Hello Gary,

Thank you for the help. It works with just one issue, the flags are not encrouching on the nav bar and moving the search windows off the bar.

I have updated the code here: https://jsfiddle.net/uhamw863/1/

Here is an screen grab from the testing site: http://imgur.com/AeQZGRd

Thanks,
Trina