I have an ASP.Net Hyperlink with a set height. The text is rendered at the top left of it. How do I vertically center it (-the text)?
(In C# I'd have: label1.TextAlign = ContentAlignment.MiddleCenter; . How is it done in ASP.Net?)
Tried the following but it doesn't work (neither on FF nor on IE).
<form id="form1" runat="server">
<div>
<asp:HyperLink NavigateUrl="~/WebForm1.aspx" runat="server" CssClass="MyClass" BackColor="White"
Height="100px" Text="MyText" Width="200px" ></asp:HyperLink>
</div>
</form>
And:
.MyClass
{
display: table-cell;
text-align: center;
vertical-align: middle;
}
Add the following styles to your HyperLink:
display:table-cell;
text-align:center;
vertical-align:middle;
If you are going to reuse that style is better to define a class:
<asp:HyperLink ... class="myClass" >HyperLink</asp:HyperLink>
and then in your stylesheet:
.myClass{
display:table-cell;
text-align:center;
vertical-align:middle;
}
Or add the styles inline:
<asp:HyperLink ... style="display:table-cell;text-align:center;vertical-align:middle;" >HyperLink</asp:HyperLink>
Add folowing attributes to the CssClass or the inline style:
{
display: table-cell;
vertical-align: middle;
line-height: 32px;
}
note that replace "32px" with your height of Hyperlink.
Related
I have original.css file that i can't remove or change from the page.
original.css
table {
border-collapse: collapse;
border-spacing: 0;
}
The radio buttons are showing a border and only way it seems to go away its when using chromedev tool I remove border-collapse:collapse from the original.css. I been trying to do overwrite it using the code below but nothing works. Any suggestion on how to remove border?
<style>
input[type="radio"] {
margin-left: 10px;
margin-right: 1px;
border: none;
border-spacing: 0;
CellSpacing:-1;
}
</style>
<div class="contact-input-item" style="padding-left: 8.9cm; ">
<label><b>By:</b>
<asp:RadioButtonList ID="send_by" runat="server" RepeatDirection="Horizontal" CssClass="rbl" BorderStyle="None" Style="display: none">
<asp:ListItem Text="Email" Value="Email" /> <asp:ListItem Text="fax" Value="fax" />
</asp:RadioButtonList></label>
More specific CSS will override less specific css. So if you can use the class name as well as the type of item inside of your style tags that might be able to push out that "Table" specification.
<style> .contact-input-item input {...etc...} </style>
Then as a last resort you can use !important:
<style>
.contact-input-item input {
border-collapse:separate !important;
}
</style>
I have a linkbutton inside a div. I have set the height & width of the div to look like a square using css. I have also set height & width of linkButton via css. Also my LinkButto
display propery is set to block.(To get the hyperlink effect all over the control).
what I want now is to center the LinkButton text vertically and horizontally.
I tried all possible properties of div and linkbutton with no luck.
Only way I could do this was setting padding(top, left, right) but then it messes up the layout.
.divblock
{
background-color :#EEEEEE;
border:2px solid;
width : 90px;
height :80px;
}
.Linkbutton
{
text-decoration: none ;
color :black !important;
display:block;
width : 85px;
height :80px;
}
aspx:
<div id="myDiv" runat="server">
<asp:DataList ID="dl1" runat="server" RepeatDirection="Horizontal" ItemStyle-CssClass ="Items" ItemStyle-HorizontalAlign="Center">
<ItemTemplate>
**<div class ="divblock">**
<asp:LinkButton **CssClass="Linkbutton"** OnCommand="PresItems_Command" ID="TestLB1" runat="server" Text="Test" />
</div>
</ItemTemplate>
</asp:DataList>
</div>
Here is one solution that may work for you:
Demo Fiddle
HTML:
<div class="divblock">
Lorem ipsum.
</div>
CSS:
.divblock {
//other styles
display: table;
text-align: center;
}
.linkbutton {
//other styles
display: table-cell;
vertical-align: middle;
}
Given the following markup
<div id="newItems" class="literaltext" >
<p> <asp:Image runat="server" ImageUrl="~/Images/32x32.png"
ClientIDMode="Static" /> Click
<a href="Shareholder Letter Jan 2013_Final.pdf" >here</a>
to read our President's letter to shareholder's for 2013
</p>
<br />
<p> <asp:Image runat="server" ImageUrl="~/Images/32x32.png"
ClientIDMode="Static" /> <span >Click
<a href="Calc.aspx" >here</a>
to run our <strong>Return on Investment Calculator</strong> to see how the economics of using <span class="green"><b>EnerBurn®</b></span> can work for your fleet.</span>
</p>
<br />
<asp:Literal ID="LiteralWelcome" runat="server"></asp:Literal>
</div>
and the following css;
#newItems {
display: inline-block;
}
#newItems img {
/*display: block;*/
margin: auto;
overflow: hidden;
}
#newItems span {
vertical-align: middle;
text-align: center;
margin-top: 0;
padding-top: 0;
}
I cannot get the text to the right of the image to align with the image. The image always appears much higher then the text. If i could vertically align the text in the middle of the height in the p tag it would at least look about right. I've tried about 50 variations, this being the latest.
vertical-align:middle;
on the img rule seems to work:
#newItems img {
/*display: block;*/
margin: auto;
overflow: hidden;
vertical-align:middle;
}
jsFiddle example
I'm looking for a straight forward css solution that will force labels to top align with their controls in asp. So for example:
<asp:Label runat="server" AssociatedControlID="cboBox" Text="Control Label" />
<asp:DropDownList runat="server" ID="cboBox" />
Would appear something like:
Control Label
[[[[[]]]]]]]]]]]]V
Any ideas?
Wrap them both in a span or div:
<span class="field">
<asp:Label runat="server" AssociatedControlID="cboBox" Text="Control Label" />
<asp:DropDownList runat="server" ID="cboBox" />
</span>
Then:
.field label,
.field select
{
display: inline-block;
vertical-align: top;
/* achieves same as inline-block for IE7 */
*display: inline;
*zoom: 1;
}
You can try putting them in a container, and apply specific styling for spans within that container. The example below might need a little tweaking, but it should point you in the right direction:
div.container span {
display: table-cell;
vertical-align: top;
}
div.container input {
display: table-cell;
vertical-align:middle;
}
And then on the page:
<div class="container">
<asp:Label runat="server" AssociatedControlID="cboBox" Text="Control Label" />
<asp:DropDownList runat="server" ID="cboBox" />
</div>
I have two div's one has textbox in it and other just plain text. This is how it looks:
. I want to move text div which has language in it to the next line where arrow is showing in the pic. I searched every where cant find any solution the wordwrap is not working. Also i have to do this within css.
Here is the aspx code for both:
<asp:Panel ID="search" runat="server" EnableViewState="False" Wrap="False">
<div id="txtBox">
<asp:textbox id="box" runat="server"></asp:textbox>
<div id="text" runat="server">Language</div>
</div>
</asp:Panel>
css:
#search
{
position:absolute;
top:100px;
height:50px;
left:100px;
width:1000px;
}
#txtBox
{
float: left;
}
Here is the solution for anyone who is stuck in same situation:
#text
{
clear: left;
}
clear:left moves the text to next line to the bottom of the textbox. Then you can use margin-left to set the text at any position you want.
You don't want to use float:left in this situation. float:left is for stacking block level HTML elements horizontally.
block level elements automatically stack vertically, which seems to be what you want.
However, the <asp:TextBox> is an inline level element, so you can put a <br /> after it, or wrap it in a <div>.
Solution:
HTML
<asp:Panel ID="search" class="search-class" runat="server" EnableViewState="False" Wrap="False">
<div id="txtBox">
<asp:textbox id="box" runat="server"></asp:textbox>
<br />
<div id="text" runat="server">Language</div>
</div>
</asp:Panel>
OR
<asp:Panel ID="search" class="search-class" runat="server" EnableViewState="False" Wrap="False">
<div id="txtBox">
<div>
<asp:textbox id="box" runat="server"></asp:textbox>
</div>
<div id="text" runat="server">Language</div>
</div>
</asp:Panel>
CSS
.search-class
{ /* Curt is right, the ID="search" is in a naming container, */
/* so use class selector */
position:absolute;
top:100px;
height:50px;
left:100px;
width:1000px;
}
have you tryed doing:
clear:both on the div with the language?
and maybe you should contain the textbox
/* Containing floats */
.contain:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
/* IE6 */
* html .contain {
height: 1%;
}
/* IE7 */
*:first-child+html .contain {
min-height: 1px;
}
When ASP.NET controls are rendered to the client, they sometimes produce different IDs (unless specified otherwise in ASP.NET 4).
Looking at your code, I don't see any control with an ID of txtBox, so these styles aren't being applied.
When working with ASP.NET, I find its best to use classes for styling, as these will stay the same after rendering.
<asp:Panel ID="search" runat="server" EnableViewState="False" Wrap="False" CssClass="search">
<div id="txtBox">
<asp:textbox id="box" runat="server" CssClass="txtBox"></asp:textbox>
<div id="text" runat="server">Language</div>
</div>
</asp:Panel>
.search
{
position:absolute;
top:100px;
height:50px;
left:100px;
width:1000px;
}
.txtBox
{
float: left;
}
I haven't tested this code, but you should now see these styles applying correctly, and therefore you can amend them as you wish.