2 replies [Last post]
Coder_Trina
Coder_Trina's picture
Offline
newbie
Last seen: 3 years 19 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: 19 hours 57 sec ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9742
Points: 3821

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 19 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