Web Export
  • Introduction
  • Getting Started
  • Install the Plugin
  • Create or open a project
  • Export the Artboard
  • Export Artboard Dialog
    • File Name
    • Subdirectory
    • Page Title
    • Web Page Template
    • Expected HTML Output
    • Stylesheet Name
    • Artboard Stylesheet template
    • Expected Stylesheet output
    • Script Page options
    • Images
    • Export Folder
    • Server
    • Alternative Fonts
    • Scale to fit
    • Centering the page
    • Styles Inline
    • Style via Classes
    • Markup Only
    • Outline Elements
    • Keyboard Navigation
    • Add Data Name
    • Add Image Compare
    • Auto Refresh
    • Export type
    • Reset Artboard
  • Addressing Export Issues
  • Messages Console
  • Export types
    • Export to a Single Page
    • Export to Multiple Pages
    • Export Artboards and show by size (media query)
    • Export to a Slideshow
  • Keyboard Shortcuts
  • Responsive Pages
  • Dynamical page that grows in height
  • Modifying Individual Elements
  • Elements and Sub Elements
  • Styling elements
  • Element Options
    • Id field
    • Tag Name
    • Styles
    • Classes
    • Attributes
    • Hyperlink
    • Width and Height Size
    • Background
    • Markup Inside
    • Markup Before and Markup After
    • Text Ids
    • Text Tokens
    • Row Layout
    • Column Layout
    • Overflow
    • Script Template
    • CSS Template
    • HTML Template
    • Layout Section
      • Layout Position types
      • Layout Position Location Types
      • Layout sizing options
    • Centered, Constraint and Anchored Positioning
    • Debug Element
    • Show Outline
    • Export as Image
    • Export as String
    • Export element
    • Displayed
    • Auto Export
    • Export (artboard)
    • Show Markup
    • Show CSS
    • Show Property Changes
    • Reset All Property changes
    • Navigation Buttons
  • Changed Properties
  • How to section
    • Creating a hover menu
    • Centering a page or element
    • Showing Overlays
    • Embedding an HTML page
    • Linking to pages or views
    • Creating a download link
    • Creating List items
    • Embedding Fonts
    • Adding Hover Effects
    • Styling Hyperlinks
    • Showing elements by size
    • Creating a Fixed Header
    • Make a Stretchable Line
    • Blend Modes
  • Creating Code Blocks
  • How Exporting Works
  • Single Page Application API
  • Element Tokens
  • Template Tokens
  • Setting up a server
  • Putting your site online
  • Code Block Snippets
    • Adding a cursor over on hover
    • Go to next or previous artboard with swipe gesture
  • Other Features
    • Gradients
    • Blend Modes
    • Form Elements
  • Learning by Videos
  • WordPress Integration
    • Summary
    • Export the main page
  • Example Packages
  • Web Developers
  • Non Web Developers
  • Debugging
  • Version
  • Support
    • Forums
    • Discord Channel
  • License
  • Feature and Bug Reports
  • Related Plugins
Powered by GitBook
On this page

Was this helpful?

  1. Element Options

Centered, Constraint and Anchored Positioning

Anchor elements to a specific position

PreviousLayout sizing optionsNextDebug Element

Last updated 3 years ago

Was this helpful?

Constraints are a way to position and anchor an element to a location.

Common constraints are left, top, right, bottom, vertical center and horizontal center.

By default elements are positioned to the top and the left edge of its group.

An elements positioned in the top left edge start at 0. As you increase the top and left (or the x and y) the element is moved to the right and down. The amount moved is in pixels or dots per inch.

An element positioned at top 10 and left 20 is positioned 10 pixels from the top edge and 20 pixels from the left edge.

The left and top correspond to the x and y shown in the artboard when not inside of group.

When an element is inside a group the top and left position is specified from the edge of that group when exported. In XD the x and y are not from the edge of the group but from the edge of the artboard.

The top and left is the default position used when exporting. The default positioning type is absolute.

When the positioning is not absolute, for example, relative, then the top and left are disregarded or treated differently.

To anchor an element to the right and top select the element and open the Element Options panel:

Select the top and right check boxes:

To anchor an element to the horizontal and vertical center of it's container select the element and set the horizontal and vertical options:

To stretch an element to fill it's available width select the left and right positions and remove the width in the styles field:

Horizontally or vertically centering an artboard or element in a responsive group can result in the element clipping or overlapping the group boundaries.

Define a minimum width or minimum height on the group to prevent it from shrinking and clipping its descendants or set overflow to auto or hidden.

To prevent an element from being clipped or extending beyond it's group boundaries do the following:

  • Select the group that the element is in

  • Enter a minimum width or minimum height or both

  • Example, min-width: 500px or min-height: 500px

You can also center an item in the group by setting the margin option. Open the Macros panel and select Center using Margin.

Centering Example Project

Constraint and Anchors Example Project

CSS Styles Documentation

Open up the

Go to the field

Alternatively set the to auto to show group scrollbars or hidden to clip the group contents.

Another alternative is set the and of the element to a percentage so it shrinks or grows as the responsive group grows or shrinks.

You can also center multiple objects using the Flex layout. See the , or stack layout.

Elements Panel
styles
overflow
width
height
row
column
Logoxd-examples/web-export/examples/centering at master · velara3/xd-examplesGitHub
Logoxd-examples/web-export/examples/constraints at master · velara3/xd-examplesGitHub
Logomin-width - CSS: Cascading Style Sheets | MDN
Logomin-height - CSS: Cascading Style Sheets | MDN