I have question how can I centre text "Smart home" because when I add button on the right the sign it's not in the centre.

 <button onclick="hide()" style="float: right">Sign up</button>
 <h1 style="text-align: center">Smart home</h1>

CodePudding user response：

You need to remove the right button from the standard flow. The result won't be always fine, because - particularly with a long text - it will be able to overlap with the right button. But it will exactly what you asked here, the "Smart home" text will be centered.

An example:

<button onclick="hide()" style="position: absolute; right: 0">Sign up</button>
<h1 style="text-align: center">Smart home</h1>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

If you not only learn HTML, please use some more sophisticated solution.

Note, it also removes the link between H1 and BUTTON. A much better solution would be to put the whole thing into a 100%-width, relative positioned, auto-heighted DIV, roughly so:

<div style="width: 100%; height: auto; position: relative">
  <button onclick="hide()" style="position: absolute; right: 0; top: 0">Sign up</button>
  <h1 style="text-align: center">Smart home</h1>
</div>

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

So the only problem will be that the "button" will overflow if it is heigher than the "Smart home" text.

CodePudding user response：

float is normally used when there is a possibility that the content surrounding it may need to flow under the floated element if the content gets too long.

If you don't envisage that happening then just removing the float and instead position absolute and right: 0 will be sufficient as an absolutely positioned element does not effect the positioning of other elements so the text will be centered in the entire width of its container.

<button onclick="hide()" style="right : 0; position: absolute;">Sign up</button>
<h1 style="text-align: center">Smart home</h1>

<iframe name="sif3" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

There are various methods available to position text element with there pros & cons.

float: right or float: left make different behavior of layout.
You can use clear property with it to solve problem:

clear: right/left

<button onclick="hide()" style="float: right">Sign up</button>

<h1 style="text-align: center;clear: right;"> Smart home</h1>

<iframe name="sif4" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

You can use display: block;margin-left: auto to right align

<button onclick="hide()" style="margin-left:auto;display:block">Sign up</button>

<h1 style="text-align: center"> Smart home</h1>

<iframe name="sif5" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

You can also use flex, grid, or position(absolute/relative/fixed) properties to reposition but it is advised not to use or use less of float property