center content of linkbutton - asp.net

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;
}

Related

How can I resize the width of an element when collapse panel is expanded?

I am using the web application template that comes with visual studio. I have added a nested master page that splits the main content into two other content place holders, both of which are wrapped in divs that have css styling applied to them in an attempt to control their widths. One is used as the main content area for each page that inherits from this nested master page and, the other content place holder is used as a side panel that can be be expanded and collapsed left to right. This side panel will be persistent across most pages. That is why its in a content place holder so that in a page that doesnt need it can create custom content and then just leave it blank or use other data. This functionality has been achieved with the collapsible panel extender from ajax but, the size of the main content area is has a locked width. In my css I set max-width and min-width on the main content area but it only sets it to the min-width. Upon reading css documentation I have discovered that the min-width property overrides the max-width and width properties. My question is How do I get the main content area to be 95% in width when the side panel is collapsed and 75% in width when the side panel is expanded? I've tried to include as much relevant information as I could think of but if more is needed I will gladly provide it.
The relevant markup from my nested master page
<asp:Content ID="Content3" ContentPlaceHolderID="MainContent" runat="server">
<div style="width: 100%; height: 100%;">
<div class="leftSidePanel">
<asp:ContentPlaceHolder ID="LeftSidePanelContent" runat="server">
<asp:Panel ID="Panel2" runat="server" CssClass="collapseLeftSidePanelHeader" >
<div style="padding: 5px; cursor: pointer; vertical-align: middle;">
<asp:ImageButton ID="Image1" runat="server" ImageUrl="~/Images/CollapsiblePanel/expand_blue.jpg" AlternateText="(Show Details...)" />
</div>
</asp:Panel>
<asp:Panel ID="Panel1" runat="server" CssClass="collapseLeftSidePanel" >
<br />
<asp:Label ID="Label1" runat="server" Text="MY PANEL"></asp:Label>
</asp:Panel>
<ajax:collapsiblepanelextender ID="cpeLeftSidePanel" runat="Server"
ExpandedSize="250"
CollapsedSize="0"
ExpandDirection="Horizontal"
TargetControlID="Panel1"
ExpandControlID="Panel2"
CollapseControlID="Panel2"
Collapsed="True"
TextLabelID="Label1"
ImageControlID="Image1"
ExpandedImage="~/Images/CollapsiblePanel/collapse_blue.jpg"
CollapsedImage="~/Images/CollapsiblePanel/expand_blue.jpg"
SuppressPostBack="true" />
</asp:ContentPlaceHolder>
</div>
<div class="mainPanel">
<asp:ContentPlaceHolder ID="MainPanelContent" runat="server">
</asp:ContentPlaceHolder>
</div>
</div>
The relevant css: the width for the collapse panel is set in the collapsible panel extender
.main
{
padding: 0em 1em;
margin: 1em;
width: 100%;
min-height: 420px;
border: thin solid black;
}
.mainPanel{
max-width: 90%;
min-width: 75%;
height: 100%;
float:right;
border: thin solid green;
}
.leftSidePanel{
min-width: 0;
max-width: 20%;
height: 100%;
float: left;
border: thin solid blue;
}
.collapseLeftSidePanelHeader{
width:30px;
height:100%;
background-repeat:repeat-y;
background-color: AliceBlue;
font-weight:bold;
float: right;
}
.collapseLeftSidePanel {
background-color:black;
overflow:hidden;
width:0;
height: 100%;
}
I just realized that I could possibly solve this by adding a second collapse panel extender and set it's target control id property to the main panel and have its trigger be the header of the side panel. This way when the side panel is expanded the main panel will collapse and vice versa. I could then use the expand and collapsed sizes to set the 75% and 95% values of the main panel. This seems like a hack to me and i would prefer a more pragmatic solution.

How do I center text in an ASP.Net Hyperlink?

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.

Is there a solid way to top align labels to their controls?

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>

Move div in next line using css

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.

CSS definitions needed to center a dynamiclly created thumbnail image in a containing square frame

I want to create an image gallery.Each image is scald dynamiclly so its biggest dimension will be 100px
and the other dimension is scaled so it will preserve the original aspect ratio.
(For example if the original image width is 200 and the image height is 400 it will be scaled to w:50px h:100px thumbnail)
I want that the each image will be placed in a 100px w by 100px h square frame.
The problem is that in the images are aligned to the left and to the top of the containing
square.
What do I need to define in the CSS so that the images will be centered in the containing square ?
The CSS I used:
<style type="text/css">
#gallery ul
{
display: inline-block;
list-style-type:none;
margin:0px;
padding:0px;
width:530px;
}
#gallery ul li
{
width:100px;
height:100px;
border:1px solid black;
padding:1px;
margin:1px;
display: block;
float:left;
}
#gallery ul li:hover
{
background-color:#CCC
}
</style>
I use ASP.NET ListView control to create the gallery :
<div id="gallery">
<asp:ListView ID="lstvImages" runat="server" ItemContainerID="itemContainer">
<LayoutTemplate>
<ul>
<asp:Placeholder
id="itemPlaceholder"
runat="server" />
</ul>
</LayoutTemplate>
<ItemTemplate>
<li>
<a href='InsertImageToArticle.aspx?relativePath=<%# Eval("RelativePath") %>'><img src ='<%# Eval("RelativePath") %>' width='<%# Eval("ThumbnailWidth") %>' height = '<%# Eval("ThumbnailHeight") %>' /></a>
</li>
</ItemTemplate>
</asp:ListView>
</div>
Thanks
try changing the margin of the image to:
margin: 0 auto;
this should make the left and right margins equal and send the image to the center of the containing element.
Sorry, I am on my mobile at the moment and the qwerty keyboard is pure rubbish or I would elaborate more.

Resources