Solved

Center control in div

Posted on 2014-10-14
13
162 Views
Last Modified: 2014-10-15
Is there a way to center a web server control within a div using css3?  If so,  please provide an example.

Thanks
0
Comment
Question by:Ray Turner
  • 5
  • 4
  • 3
13 Comments
 
LVL 58

Expert Comment

by:Gary
ID: 40379939
If it has a set width then just add to its css

margin:auto;
0
 
LVL 53

Expert Comment

by:Julian Hansen
ID: 40380176
A web server control is a bit high level for this discussion - a control will render out as html - how it renders to html will determine how you style it.

Centering is also 2 dimensional - vertical and horizontal. In HTML the latter is sometimes a lot easier to achieve than the former.

As Gary has mentioned is to give it a margin of auto - to center it - but this won't always work - you might have to look at giving the parent element a style of text-align: center. If you want to center vertically then that also needs discussion.

Can you give an example of the rendered html for the control in question.
0
 

Author Comment

by:Ray Turner
ID: 40380381
I tried both suggestions.  Neither worked.  Here's my code.
<table>
  <tr id="Billboard">
    <td>
      <div style="margin-left: 125px; padding-top: 5px;">
        <dx:ASPxImageSlider ID="imgsBillboard" runat="server" ClientInstanceName="ImageSlider" EnableTheming="False" NavigateUrlFormatString="" Height="250px" Width="980px" SettingsSlideShow-PausePlayingWhenMouseOver="True" ViewStateMode="Enabled" ImageUrlField="ImageURL" NavigateUrlField="Billboard_NavigateURL" SettingsSlideShow-Interval="7000" Cursor="pointer">
          <SettingsImageArea ImageSizeMode="ActualSizeOrFit" ItemTextVisibility="None" AnimationDuration="700" AnimationType="Fade" NavigationButtonVisibility="None" />
          <SettingsBehavior ImageLoadMode="Auto" />
          <SettingsNavigationBar Mode="Dots" />
          <SettingsSlideShow AutoPlay="true" PlayPauseButtonVisibility="Faded"></SettingsSlideShow>
          <SettingsAutoGeneratedImages ImageHeight="440px"></SettingsAutoGeneratedImages>

          <ClientSideEvents ItemClick="function(s, e) {LaunchURL();}"></ClientSideEvents>
          <Styles>
            <NavigationBarDotsModeBottom>
              <Margins MarginTop="4px" />
              <Paddings PaddingTop="4px" />
            </NavigationBarDotsModeBottom>
            <ImageArea Width="980" Height="250">
            </ImageArea>
            <ItemTextArea Font-Names="Arial" Font-Size="11pt">
            </ItemTextArea>
          </Styles>
        </dx:ASPxImageSlider>
      </div>
    </td>
  </tr>
</table>

Open in new window

0
 

Author Comment

by:Ray Turner
ID: 40380427
Sorry for the sloppy code.  Here's a cleaner version:
<div id="Billboard" style="margin-left: 125px; padding-top: 5px;">
  <dx:ASPxImageSlider ID="imgsBillboard" runat="server" ClientInstanceName="ImageSlider" EnableTheming="False" NavigateUrlFormatString="" Height="250px" Width="980px" SettingsSlideShow-PausePlayingWhenMouseOver="True" ViewStateMode="Enabled" ImageUrlField="ImageURL" NavigateUrlField="Billboard_NavigateURL" SettingsSlideShow-Interval="7000" Cursor="pointer">
    <SettingsImageArea ImageSizeMode="ActualSizeOrFit" ItemTextVisibility="None" AnimationDuration="700" AnimationType="Fade" NavigationButtonVisibility="None" />
    <SettingsBehavior ImageLoadMode="Auto" />
    <SettingsNavigationBar Mode="Dots" />
    <SettingsSlideShow AutoPlay="true" PlayPauseButtonVisibility="Faded"></SettingsSlideShow>
    <SettingsAutoGeneratedImages ImageHeight="440px"></SettingsAutoGeneratedImages>
    <ClientSideEvents ItemClick="function(s, e) {LaunchURL();}"></ClientSideEvents>
  <Styles>
    <NavigationBarDotsModeBottom>
      <Margins MarginTop="4px" />
      <Paddings PaddingTop="4px" />
    </NavigationBarDotsModeBottom>
    <ImageArea Width="980" Height="250"></ImageArea>
    <ItemTextArea Font-Names="Arial" Font-Size="11pt"></ItemTextArea>
  </Styles>
  </dx:ASPxImageSlider>
</div>

Open in new window

0
 
LVL 53

Expert Comment

by:Julian Hansen
ID: 40380755
Are you wanting to center  the image slider?

How is the control rendered on the client side? Do you have a link we can go to?

Have you tried something like this
HTML
<dx:ASPxImageSlider  .... CssClass="ASPxImageSlider" ....>

Open in new window

CSS
.ASPxImageSlider {
    margin: 0 auto;
}

Open in new window


However, without seeing how the control is rendered in the browser - just guessing.
0
 
LVL 58

Expert Comment

by:Gary
ID: 40380757
Are we talking about the image slider?
margin auto will works since it has a set width
0
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 

Author Comment

by:Ray Turner
ID: 40381037
Here's the url to see what is going on.

http://www.newseasonministry.org/

I center the control with the following code:

<div id="Billboard" style="margin-left: 125px; padding-top: 5px;">

It's okay.  I wanted to do something that's more reusable.
0
 
LVL 53

Accepted Solution

by:
Julian Hansen earned 500 total points
ID: 40381558
You need to add
margin; 0 auto;

Try adding this to your style sheet
#billboard .dxisControl {
   margin: 0 auto;
}

Open in new window


and remove the margin from the Billboard style
i.e remove
margin-left: 125px;
0
 

Author Closing Comment

by:Ray Turner
ID: 40381887
Perfect!  Thanks it works.  The only change I had to make was the following:

#Billboard .dxisControl {
   margin: 0 auto;
}

CSS/HTML is case sensitive.
0
 
LVL 53

Expert Comment

by:Julian Hansen
ID: 40381910
You are welcome - thanks for the points.
0
 
LVL 58

Expert Comment

by:Gary
ID: 40382115
So the first comment was wrong then...
0
 

Author Comment

by:Ray Turner
ID: 40382201
Yes.  The selector was missing.
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…

863 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

29 Experts available now in Live!

Get 1:1 Help Now