1

I have a dynamically created header on a page. Sometimes, there are left and right buttons to the sides of it, sometimes only left or right, and sometimes none.

Is there a way to center the main text and keep it centered when adding other elements next to it? Currently, when I add the left/right buttons, the whole assembly is centered. If I only add one button, the whole thing is shifted off to one side.

How do I keep the main element centered but add other elements around it?

This works fine:

<h1>
  <img src="left.png" />
  Main Title
  <img src="right.png" />
</h1>

This doesn't work:

<h1>
  <img src="left.png" />
  Main Title
</h1>
Nathan Petersen
  • 214
  • 5
  • 16

2 Answers2

1

I discovered an answer to my question incase anyone in the future finds this post.

Keep the element in the markup (HTML), but style it using CSS to visibility: hidden instead of display: none. This keeps the formatting on the page, but doesn't render the object to view.

visibility: hidden NOT display: none

Read this article for more information...

Community
  • 1
  • 1
Nathan Petersen
  • 214
  • 5
  • 16
0

This could be a solution:

<!doctype html>
<html>
<head>
<title>Select Test</title>
<style type="text/css">
    * {
        margin: 0;
        padding: 0;
    }
    #header {
        width: 100%;
        position: fixed;
        left: 0px;
        top: 0px;
    }

    h1 {
        text-align: center;
        width: auto;
        line-height: 53px;
    }

    .left {
        position: fixed;
        top: 5px;
        left: 5px;
    }

    .right {
        position: fixed;
        top: 5px;
        right: 5px;
    }

</style>
</head>

<body>
<div id="header">
<img class="left" src="http://files.softicons.com/download/internet-icons/user-icons-by-2shi/png/48/user1.png" />
<h1>My Title</h1>
<img class="right" src="http://files.softicons.com/download/internet-icons/user-icons-by-2shi/png/48/user1.png" />
</div>
</body>

</html>

But you can find many more. Try to remove right or left img and title should remain centered.

P.S. If you don't want a fixed header, change #header to

#header {
        width: 100%;
        margin-top: 0px;
        margin-left: 0px;
    }
maurelio79
  • 292
  • 1
  • 9