I would like to show a H1 header in the center of page and also set its position as "fixed"(since I don't want it to go away from screen when user scrolls)
I've tried the following options, but unfortunately couldn't achieve it.
Option 1:
<div align="center" style="position:fixed;"><h1>Welcome</h1></div>
Option 2:
<h1 text-align="center" style="position:fixed;">Welcome</h1>
Option 3:
<h1 text-align="center" position="fixed">Welcome</h1>
So far, all of the above options shows the text in fixed position, but it's not in the center of screen. But when I remove the position: fixed;, the text appears in center of screen.
Any suggestions?
You can try this:
<div align="center" style="position:fixed;width:100%"><h1>Welcome</h1></div>
Give width:100% to your div.
Here is a Demo
You can define to your div left:0; and right:0;
as like this
<div align="center" style="position:fixed;left:0;right:0;"><h1>Welcome</h1></div>
Option 1: <div align="center" style="position:fixed;"><h1>Welcome</h1></div>
HTML align is deprecated.
Solutions:
<div style="position:fixed;width:100%;text-align:center;"><h1>Welcome</h1></div>
<div style="position:fixed;right:0;left:0;text-align:center;"><h1>Welcome</h1></div>
Option 2: <h1 text-align="center" style="position:fixed;">Welcome</h1>
There is no a HTML attribute which is called text-align="center".
<h1 style="position:fixed;width:100%;text-align:center;">Welcome</h1>
<h1 style="position:fixed;left:0;right:0;text-align:center;">Welcome</h1>
Option 3: <h1 text-align="center" position="fixed">Welcome</h1>
HTML attribute does not have text-align="center" and position="fixed".
Option 3 solution is like option 2's answers.
Related
My website tite is not aligned with the logo
This is how it looks now:
Wordpess is generating the following html snippet:
<div id="logo" class="clearfix">
<img width="100" height="100" src="http://localhost/test/wp-content/uploads/2016/06/icon.png" class="custom-logo" alt="recette flocon advoine" itemprop="logo">
<h1 class="site-title">test test</h1>
<h2 class="site-description">slogan</h2>
</div>
How can I get something like this :
#logo{display: table;}
.h1{display: table-cell; vertical-align:middle}
This should work, if not, try:
top: 50%; margin-top: - half.the.height.of.the.font.size .
By the way, "http://localhost/test/" this is wrong on so many levels. Use "index.php / index.html" instead.
To your h1 element add the following: style="padding-top:20px;" resulting:
<h1 class="site-title" style="padding-top:20px;>
Add more padding pixels as needed.
I want to vertically center a "list" of <span> elements horizontally in an Ionic ion-scroll, and have tried just about every "centering" style I can find, but just cannot get it to center...
<body ng-app='app' ng-controller='Index as vm'>
<ion-content scroll=false>
<div style="padding: 0px;height=80px;width:30%;align=center" >
<ion-scroll class="center" scrollbar-x=false direction="x"
style="text-align:center;background-color:pink;height: 80px;width:99%;white-space: nowrap">
<span class='center' style="text-align:center;margin:5px;background-color:red;align=center" ng-repeat='d in vm.data'>{{d}}</span>
</ion-scroll>
</div>
</ion-content>
</body>
Here is the Plunk for the above.
I have colored the <span> elements red, and the container pink so we can see where the <span>are relative to the container.
Anyone have any suggestions here?
Thanks in advance for any help.
Read this article:
https://css-tricks.com/centering-in-the-unknown/
It will explain to you how to do it.
It use after, before to achieve it along with height:100% for the ghost element.
The demo for this is found here:
http://codepen.io/chriscoyier/pen/gsodI
You can try to this
display table-cell and table
as like this
Define your div display table and define your ion-scroll display tablep-cell
<div style="padding: 0px;height:80px;width:30%;align:center; background:green;display:table" >
<ion-scroll class="center" scrollbar-x=false direction="x"
style="text-align:center;background-color:pink;display:table-cell; vertical-align:middle;height: 80px;width:99%;white-space: nowrap">
<span class='center' style="text-align:center;margin:5px;background-color:red;align=center" ng-repeat='d in vm.data'>{{d}}</span>
</ion-scroll>
</div>
I don't know if this is possible or not, but any help would be very appreciated.
I have this code in my HTML:
<img src="mountains.jpeg" class="green inline-image" data-caption="A picture of mountains!">
where data-caption is a custom attribute.
I want to do something like this.
As you can see, the data-caption has to be in a small box right under the image, with the exact width as the image. I don't know if this is possible or not, so can you recommend an alternative way if not?
I tried doing something like this:
<img src="mountains.jpeg" class="green inline-image">
<div class="photo-caption">
A picture of mountains!
</div>
CSS:
.inline-image {
width:30%;
}
.photo-caption {
width:30%;
background-color:blue;
}
This works, but I'd prefer to not have to make a new <div> for every caption. I'd rather have it in the <img> tag.
Thank you very much!
Yeah it's possible using css content but problem in your case is you are using it on an img element which won't work on some browsers.
A different approach I would suggest is to insert your img element inside a div and have that custom attribute in there.
html:
<div class="img-block" data-caption="A picture of mountains!">
<img src="mountains.jpeg" class="green inline-image" >
</div>
css
.img-block:after {
content: attr(data-caption);
}
Reference
I'm currently practicing some HTML 5 Web App development, but I can't even get my header to align properly.
visit http://www.sithhappens.net to see what I mean, (view page source to see my html)
and http://www.sithhappens.net/iphone.css
to see the CSS
I want the "Route.me" to align middle, and button (which is just a place holder till I implement a button there) to stay to the left. Thanks.
(Visit the webpage on your mobile device)
Here is the correct HTML, I have injected the styling into the HTML so you can see how it is done. The trick is to make the button position: absolute so it does not affect the spacing of the text "Route.Me".
<article>
<header><button style="
position: absolute;
">Button</button> <div align="center" style="display: block; text-align: center;">Route.Me </div>
</header>
</article>
use only
<div align="center" style="margin-top:-20px;">Route Me</div>
You will have to place button text in a <p> element. Set styles like this:
<div class="btn">Button</div>
<div align="center" class="txt" >Route.Me </div>
CSS
.btn {
float:left;
}
.txt {
display:block;
}
I have a div inside that div i have an image which says "Searching .." Now for this modal How to apply the border
<div id="waiting-dialog" title="Waiting" style="display:none">
<img src="myimage.gif" border="0" align="middle" hspace="20" vspace="5"/>
Retrieving all the required information based on your selection.This may take a few moments. Please wait...
</div>
And for this Modal I am having the image Appearing on Left side and Text not appearing properly .How can I make tthe text to
appear in neatly manner
Take the text in a separate div inside the "waiting-dialog" div only, then use the use style float:left for that new div and image. Now you can play around the new div position with paddings, margins and fonts etc to make it neat. see the below sample code.
<div id="waiting-dialog" title="Waiting">
<img src="myimage.gif" border="0" align="middle" hspace="20" vspace="5" style=" float:left;"/>
<div style=" float:left; padding: 5px;"> Retrieving all the required information based on your selection.This may take a few moments. Please wait...</div>
</div>