How do you align two items in the center of a border?


Tags: javascript,html,css,sass

Problem :

I wrote this css in order to align my text to the center of a bottom border -

.arrow-down
  width: 2rem
  display: inline
  position: absolute
  top: -0.6rem
  left: 50%
  margin-left: -59px
  background: $grey_200
  z-index: 5

.showless
  > section
    width: 100%
    text-align: center
    border-bottom: 0.1rem solid $grey_300
    line-height: 0.1em
    margin: 1rem 0 2rem
    background: $grey_200
    > span
      width: 6rem
      margin-right: -5.6rem
      right: 56%
      position: absolute
      top: 0
      background: $grey_200
      padding: 0 10px
.showless
  position: relative
  .content
    overflow: hidden
    transition: all linear 0.5s
    -webkit-transition: all linear 0.5s
  .trigger
    display: inline-block
    cursor: pointer
    position: relative

My html is

<div class="showless">
  <div ng-transclude class="content" ng-style="style">

  </div>
  <section class="trigger" ng-if="showSection" ng-click="toggleMore($event)">
    <i class="arrow-down"></i>
    <span>{{more ? "More":"Less"}}</span>
  </section>
</div>

It ends up looking off center. Any ideas on how to bring the down arrow and More text in center? Looks like this - off centered!



Solution :

Just apply text-align to the section:

.trigger{
  text-align: center;
}
<div class="showless">
  <div ng-transclude class="content" ng-style="style">

  </div>
  <section class="trigger" ng-if="showSection" ng-click="toggleMore($event)">
    <i class="arrow-down"></i>
    <span>{{more ? "More":"Less"}}</span>
  </section>
</div>


    CSS Howto..

    CSS - How can I center my navigation bar?

    How to edit the element.style css?

    How to get the Apple Javascript Split Flap Counter to run on pure CSS

    How to change cursor on the NextGen Gallery Slideshow in Wordpress

    How to get dropdown menus to align with the correct menu tab

    how do i align contact form 7 next to text

    I want to make semi-identical manu like the one on this page - how? [closed]

    How to create a white border circle having white exclamation mark inside a box having a yellow background in html/css?

    How can I insert dynamic text into a div with absolute position?

    How to avoid loading CSS file for ipad sized devices ('between' mobile and full-sized)?

    How to select the first type of child of a particular CSS using CSS selector [duplicate]

    How to fetch the background of DIV on a bottom layer with exact position using jQuery and CSS

    How do I keep the 'hover' effect while using a Jquery color change effect while scrolling

    Position: fixed to position:static when horizontal scroll shows up?

    how to avoid bullets showing in main menu

    Show s horizontally in a div
    table { display: inline-block; } This should work just fine for you....
    Read more

    How set css style to GWT TextBox text?

    How can I use CSS borders to visually group my sections?

    How to control cursor/caret size with CSS

    How to style radcombobox item so that words that wrap are separated

    How to break a overflowed navigation bar via CSS

    How to select the parent's parent in CSS?

    How to use css in one page only?

    Html and CSS for emails, how to, where to?

    Show a sentence with animation

    CSS float property shows no height?

    How to hide the rest of the contents using simple CSS and Javascript

    Show icon font on image center on mouse hover

    How can I 'page zoom' on mobile browser

    How to scroll .list-group leaving navigation bar at top