I've been experimenting with a way to get a page element to overlap the elements on either side of it and stay perfectly centered between them. My solution was to declare <code>position:relative</code> and set negative <code>margin</code> values roughly equal to 50% of the element's width, but the closest I've been able to come is to half the element's percentage of its parent's width: <pre class="prettyprint"><code><!DOCTYPE html> <html> <head> <style> .clap { position:relative; margin:auto -16.66%; // This element's share of the entire parent's width = 33.33% color:#f00 } </style> </head> <body> <center> 123456789012345678901234567890 </center> </body> </html> </code></pre> I'm trying to find a CSS-only solution that will use the width of the element itself, not the width of the container. I can't use JavaScript to do this because I plan to use it as a MathJaX fix by embedding it in a <code>\style</code> command. (As far as I know, MathJaX does not provide for embedded HTML or JavaScript code within its formulas, so you see why this must be CSS-only. I know it's possible with scripting. Is it possible with CSS, or is my endeavor hopeless? Update: Thanks to a suggestion from @Daiwei, I think I'm on the road to the right solution. Thanks for all your answers. Here is the revised code: <pre class="prettyprint"><code>.clap { position:absolute; display:inline-block; transform: translate(-50%,0); color:#f00 // for contrast } </code></pre> I'd love to show you the results, but I can't upload a picture. Sorry. Another update: The solution I presented above works best in an HTML/CSS context, but it breaks in a MathJaX <code>array</code>, <code>matrix</code>, or similar tabular environment. Specifically, if the element is too long, it clips on the left side. Relative positioning moves the element halfway to the left but leaves a gaping space where it used to be! Any ideas for patching it up?

One pure CSS solution is to use <code>transform</code>. <pre class="prettyprint"><code>element { position: relative; top: 50%; transform: translateY(-50%); } </code></pre> Notes: <ol> <li>You can use <code>top: 50%;</code> for vertical and <code>left: 50%;</code> for horizontal.</li> <li>You would then use <code>translateY(-50%)</code> for vertical and <code>translateX(-50%)</code> for horizontal centering.</li> <li>You can also use this trick to align elements to the bottom or right of it's parent, like in a <code>table-cell</code> by using <code>100%</code> instead of <code>50%</code> in the css.</li> <li>If you want to support older browsers, then you'll need to use prefixes for <code>transform</code>. I highly recommend autoprefixer in your workflow.</li> </ol>

using element's own (not parent's) width for calculation or percentage in css, without javascript

Tags:

javascript

html

css

mathjax

I've been experimenting with a way to get a page element to overlap the elements on either side of it and stay perfectly centered between them. My solution was to declare position:relative and set negative margin values roughly equal to 50% of the element's width, but the closest I've been able to come is to half the element's percentage of its parent's width:

<!DOCTYPE html> <html>  <head>   <style>   .clap {    position:relative;    margin:auto -16.66%; // This element's share of the entire parent's width = 33.33%    color:#f00   }   </style>  </head>  <body>   <center>    <span style="display:inline-block">1234567890<span class="clap">1234567890</span>1234567890</span>   </center>  </body> </html>

I'm trying to find a CSS-only solution that will use the width of the element itself, not the width of the container. I can't use JavaScript to do this because I plan to use it as a MathJaX fix by embedding it in a \style command. (As far as I know, MathJaX does not provide for embedded HTML or JavaScript code within its formulas, so you see why this must be CSS-only. I know it's possible with scripting. Is it possible with CSS, or is my endeavor hopeless?

Update: Thanks to a suggestion from @Daiwei, I think I'm on the road to the right solution. Thanks for all your answers. Here is the revised code:

.clap {  position:absolute;  display:inline-block;  transform: translate(-50%,0);  color:#f00                      // for contrast  }

I'd love to show you the results, but I can't upload a picture. Sorry.

Another update: The solution I presented above works best in an HTML/CSS context, but it breaks in a MathJaX array, matrix, or similar tabular environment. Specifically, if the element is too long, it clips on the left side. Relative positioning moves the element halfway to the left but leaves a gaping space where it used to be! Any ideas for patching it up?

629

asked Feb 07 '14 22:02

Brian J. Fink

1 Answers

One pure CSS solution is to use transform.

element {     position: relative;     top: 50%;     transform: translateY(-50%); }

Notes:

You can use top: 50%; for vertical and left: 50%; for horizontal.
You would then use translateY(-50%) for vertical and translateX(-50%) for horizontal centering.
You can also use this trick to align elements to the bottom or right of it's parent, like in a table-cell by using 100% instead of 50% in the css.
If you want to support older browsers, then you'll need to use prefixes for transform. I highly recommend autoprefixer in your workflow.

113

answered Sep 30 '22 18:09

Jason Lydon

Related questions
                            
                                How to detect if a web page is running from a website or local file system
                            
                                Get div tag scroll position using JavaScript
                            
                                Is there a way to return a list of all the image file names from a folder using only Javascript?
                            
                                ThreeJS camera.lookAt() has no effect, is there something I'm doing wrong?
                            
                                Javascript calling prototype functions in constructor
                            
                                set withCredentials to the new ES6 built-in HTTP request API : Fetch
                            
                                Count the number of integers in a string
                            
                                get value in one column in spreadsheet using google apps script
                            
                                convert a $lookup result to an object instead of array
                            
                                Importing multiple files in react
                            
                                Qunit parameterized tests and mocking
                            
                                In an onclick handler, how can I detect whether shift was pressed?
                            
                                Simulating Button click in javascript
                            
                                AngularJS DOM selector
                            
                                Which is correct Node.js architecture?
                            
                                Including JavaScript in SVG
                            
                                Convert Returned String (YYYYMMDD) to Date
                            
                                rails and backbone working together
                            
                                Testing browser extensions
                            
                                check if object is a textbox - javascript

Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!

Donate Us With