クラスにプロパティを適用しますが、beforeと：afterの後に

私は矢印の形でstepperを作成しようとしています（angular/cssをほとんど使用しています）。このcodepenから始めましょう。私が今したいのは、矢のの中にステータス名を集中させることです。クラスにプロパティを適用しますが、beforeと：afterの後に

わたしが持っていた簡単な考え方は、これらの行の周りに何かを実行して、テキスト整列の中央プロパティを適用することでした（）。

.block-head { /* rest of the class css */ text-align: center; } .block-head:before { /* rest of the class css */ text-align: left; } .block-head:after { /* rest of the class css */ text-align: left; }

問題は、これが作業ではないです。私はブロックテキストクラスの中心にテキスト整列プロパティを設定しようとしましたが、どちらも機能しません...

text-align：centerプロパティをクラスに適用するにはどうすればよいですか？& ：後？それが不可能な場合は、現在のデザインを維持し、テキストを中央に配置するためにコードをどのように変更する必要がありますか？

出典

2017-10-10 Guillaume Roche-Bayard

与えることによって、簡単な修正です。

は私codepen:を見てみましょうblock-text

codepen

出典

2017-10-10 09:02:18 sol

まさに私が探していたものでした、ありがとう！ –

@ GuillaumeRoche-Bayard喜んでそれは助けた:) – sol

複数の方法があります。このようにしてみてください。これは、あなたがこのためにflexboxプロパティを使用することができ、あなたの.block-textmargin-left:50%;

function ctrl($scope){ 
 
    
 
    // those variable are passed as param to the directive 
 
    $scope.selectedKey = 2 
 
    $scope.elements = 
 
      [ 
 
       { 
 
       name: "Status 1", 
 
       key: 1, 
 
       description: "description status 1" 
 
       }, 
 
       { 
 
       name: "Status 2", 
 
       key: 2, 
 
       description: "description status 2" 
 
       }, 
 
       { 
 
       name: "Status 3", 
 
       key: 3, 
 
       description: "description status 3" 
 
       }, 
 
       { 
 
       name: "Status 4", 
 
       key: 4, 
 
       description: "description status 4" 
 
       } 
 
      ] 
 

 
      $scope.colors = 
 
      { 
 
       current: "lightblue", 
 
       success: "lightgreen", 
 
       disable: "lightgrey" 
 
      } 
 
    
 
    
 
    
 
    
 
    $scope.widthCalc = ($scope.elements.length - 1) * 26 
 
    $scope.getColor = function($index) { 
 
      if ($scope.elements[$index].key === $scope.selectedKey) 
 
       return $scope.colors['current'] 
 
      if ($scope.elements[$index].key < $scope.selectedKey) 
 
       return $scope.colors['success'] 
 
      if ($scope.elements[$index].key > $scope.selectedKey) 
 
       return $scope.colors['disable'] 
 
      } 
 
    
 
}

.block-container { 
 
\t width: auto; 
 
\t padding-top: 4px; 
 
\t padding-right: 8px; 
 
\t padding-left: 8px; 
 
    margin-bottom: -10px; 
 
} 
 

 
.block-head { 
 
    background-color: #4D81BF; 
 
    height: 20px; 
 
    line-height: 20px; 
 
    display: inline-block; 
 
    position: relative; 
 
\t width:22px; 
 
    margin-right:4px; 
 
\t margin-bottom: -5px; 
 
} 
 

 
.block-text { 
 
    color: black; 
 
    font-size: 14px; 
 
\t margin-left: 50%; 
 
} 
 

 
.block-head:before { 
 
    color: #FAFAFA; 
 
    border-left: 10px solid; 
 
    border-top: 10px solid transparent; 
 
    border-bottom: 10px solid transparent; 
 
    display: inline-block; 
 
    content: ''; 
 
\t z-index:1; 
 
    position: absolute; 
 
    top:0; 
 
} 
 

 
.block-head:after { 
 
    color: inherit; 
 
\t z-index:2; 
 
    border-left: 10px solid; 
 
    border-top: 10px solid transparent; 
 
    border-bottom: 10px solid transparent; 
 
    display: inline-block; 
 
    content: ''; 
 
    position: absolute; 
 
    right: -10px; 
 
    top:0; 
 
} 
 

 
.block-head-first { 
 
    margin-left:0px !important; 
 
} 
 

 
.block-head-last { 
 
    margin-right:0px; 
 
} 
 

 
.block-head-first:before { 
 
    color: #FAFAFA; 
 
    border-left: 0; 
 
    border-top: 0; 
 
    border-bottom: 0; 
 
    display: inline-block; 
 
    content: ''; 
 
\t z-index:1; 
 
    position: absolute; 
 
    top:0; 
 
} 
 

 
.block-head-last:after { 
 
    color: #4D81BF; 
 
    border-left: 0; 
 
    border-top: 0; 
 
    border-bottom: 0; 
 
    display: inline-block; 
 
    content: ''; 
 
\t z-index:1; 
 
    position: absolute; 
 
    top:0; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<!DOCTYPE html> 
 
<html ng-app> 
 
<head> 
 
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.1.5/angular.min.js"></script> 
 
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/css/bootstrap.min.css" rel="stylesheet" type="text/css" /> 
 
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script> 
 
<meta charset=utf-8 /> 
 
<title>Angular JS Demo</title> 
 
</head> 
 
<body ng-controller="ctrl"> 
 
    <div class="block-container"> 
 
    <div ng-repeat="element in elements" 
 
    class="block-head" 
 
    ng-class="{'block-head-first': $first, 'block-head-last': $last}" 
 
    ng-style="{'width' : selectedKey === element.key ? 'calc(100% - ' + widthCalc + 'px)' : '', 
 
      'background-color': getColor($index), 
 
      'color': getColor($index)}"> 
 
    <span class="block-text" ng-if="selectedKey === element.key">{{element.name}}</span> 
 
    </div> 
 
</div> 
 

 
</body> 
 
</html>

出典

2017-10-10 09:02:11 nabanita

これは不自然にかかわらず、センタリングされるだろうに対処するためにpadding-leftにmargin-leftから変更しかし、それは私が望むものに近いです。 @ovokuroは私が探していた解決策を見つけました –

私が言いましたように、それは複数の方法で実行することもできます。 FlexのサポートはIEに限定されています。したがって、あなたの要件に基づいて選択することができます。ありがとう！ – nabanita

.block-head { 
    text-align: center; 
} 

.block-head:before { 
    left: 0px; 
}

出典

2017-10-10 09:10:45

にdisplay: flex;とjustify-content: centerを追加します。

修正は比較的簡単でした。あなたが外側要素のtext-alignを変更しようとしていたと私は内側の要素のためにそれを変更：

block-text { 
    color: black; 
    font-size: 14px; 
    padding-left: 24px; 
    display: inline-block; 
    width: 100%; 
    text-align: center; 
}

私はまた、適切width: 100%

出典

2017-11-03 18:48:45 Intervalia

クラスにプロパティを適用しますが、beforeと：afterの後に

答えて

関連する問題