Solved

Center control in div

Posted on 2014-10-14
13
165 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 54

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
3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

 

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 54

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
 

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 54

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 54

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

ScreenConnect 6.0 Free Trial

Discover new time-saving features in one game-changing release, ScreenConnect 6.0, based on partner feedback. New features include a redesigned UI, app configurations and chat acknowledgement to improve customer engagement!

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Create CSS Animation for Page Transitions 4 26
Help to align the buttons in a row 2 28
How to make footer stick to bottom 9 31
Place text over image using CSS 6 44
When writing CSS, there are a few simple rules that will make your life easier.    1. Using ‘* {box-sizing:border-box;}’. Using this will wrap all your elements in a nice little compact box-model that will give you the width you want, like so... …
So you have coded your own WordPress plugin and now you want to allow users to upload images to a folder in the plugin folder rather than the default media location? Follow along and this article will show you how to do just that!
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…
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…

778 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