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>
Related
I need to move my image a bit to the right, but not fully.
This is what I currently have,
and this is how I need it to look like.
This is the code I have for the image currently:
<div>
<img src="../Hozier.png" width="245" height="600">
</div>
I am very new to HTML and really need some help. Thank you in advance.
You can add margin to the left side of the img element with CSS.
<div style="margin-left: 100px;"><img src="../Hozier.png" width="245" height="600"></div>
You can change the 100px value to move the image to the right more or less as needed.
You can do the following:
<div>
<img src="../Hozier.png" width="245" height="600" style="margin-left:100px;">
</div>
Or use positioning and other methods.
But the following code seems to be useless:
you can use position to move it style:"position: relative; left: 10px"
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.
I am designing this for a phone gap application..i want to code this in html..
i have two questions..
Q1)how do i place a text on the image at different positions?
suc as text1,text2,text3,text4 in the image given here.
Q2) how to place it at the centre in the page.i had given
<img src="img/img1.png" style="margin-left:5px;" />
<img align="middle" />
but,this makes no difference.
guidance required.please help.
i have another doubt...after running the program....there is the extension part of the body after the footer...if you drag up....you can see thtat the body that is between the header and footer is extended. and it moves evento the right.
any mistake in the coding?
put them in a Div, then give this Div a background style ;)
the code should be like this:
<div id='container'>
<span> text 1 </span>
<span> text 2 </span>
<span> text 3 </span>
<span> text 4 </span>
</div>
in the css:
#container{background:url(path/to/img) no-repeat scroll 0 0 transparent; background-size:100% 100%; display:block; height:...px; width:...px;}
#container span{width:50%; height:25%;display:block; overflow:hidden;float:left;}
you can add border to the spans, color etc...
You can do that by wrapping image with div and z-index. Your code should look like this:
<div style="position:fixed; top:10px; left:5px; z-index:250; width:ofimage; height:of image;">
<span style="display:block; width:30; height:20; margins if you need; float:left">text1</span>
<span style it accordingly and add float left>text2</span><br>
<spanstyle them as first two>text3</span>
<span>text4</span>
</div>
<img src="your image" style="if any">
I currently have a Table "solution" to formatting the AddThis Div Buttons.
You can see this at: http://www.siding4u.com/save-on-siding.php
At the top of the page it shows correctly:
Here's the Code (work around) for that:
<table align="center" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="60%" align="right"><img title="Help us. Help you." src="http://www.siding4u.com/media/shareaholic/img_help-us-help-you_right_yellow-text.png" alt="TEXT: Sharing is caring! Help us. Help you." width="360" height="23" /></td>
<td width="40%" align="left"><!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_default_style">
<a class="addthis_button_preferred_1"></a>
<a class="addthis_button_preferred_2"></a>
<a class="addthis_button_preferred_3"></a>
<a class="addthis_button_preferred_4"></a>
<a class="addthis_button_compact"></a>
<a class="addthis_counter addthis_bubble_style"></a>
</div>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=siding4u"></script>
<!-- AddThis Button END --></td>
</tr>
</table>
I'm having/wanting to convert all of my table layouts to CSS but I can't seem to get the AddThis buttons to cooperate. They always seem to "LEFT JUSTIFY" or BREAK Somehow - no matter what I try.
I'm guessing this is an easy fix but I'm one of those CSS "block heads" that can't seem to whip the CSS into shape.
Please help...
In css aligning images is based on their position on the page rather than their justification ( the elements with class addthis_button_preferred_1...n should probably control this ) In a table you justify it left/center/right etc. while with CSS your aim is to align the in a way that it's child elements will be in the middle.
HTML:
<div id='wrapper'> <!-- parent div containing the help-us-help-you image and the buttons-->
<div id="help_us"><!-- float:left because we want the image div and the button dive to be besides eachother -->
<img title="Help us. Help you." src="http://www.siding4u.com/media/shareaholic/img_help-us-help-you_right_yellow-text.png" alt="TEXT: Sharing is caring! Help us. Help you." width="360" height="23"/>
</div>
<div id='buttons'><!-- this div should also be floated left and have padding, to align the buttons correctly -->
<!-- each of the link elements should get some padding -->
<a class="addthis_button_preferred_1 button_preferred"></a>
<a class="addthis_button_preferred_2 button_preferred"></a>
<a class="addthis_button_preferred_3 button_preferred"></a>
<a class="addthis_button_preferred_4 button_preferred"></a>
<a class="addthis_button_compact button_preferred"></a>
<a class="addthis_counter addthis_bubble_style button_preferred"></a>
</div>
</div>
The whole example is online on this fiddle, and should hopefully help with the alignment, and is a pure CSS solution, no tables there at all!
p.s. As a side note, I do recomend you use jsfiddle for CSS/HTML/javascript issues, it does help us see the problem better, and make changes faster.
EDIT
For the second issue:
<div align="center" style="margin-bottom:0; margin-top:5px;">
<div id='wrapper'>
...
</div>
...
</div>
For this element the height for some reason is 48 px, which creates a gap between the two elements. So apply a height to it, change:
style="margin-bottom:0; margin-top:5px;"
TO:
style="margin-bottom:0; margin-top:5px;height:23px;"
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>