境界線の中央にテキストを追加します (境界線はテキストの両側のテキストと交差します)。

枠線の中央にテキストを追加する

（文字の両側に枠線が入ります）

方法: テキスト領域の長さと幅を定義し、背景を白にして、テキストを対応する位置に移動します。

具体的な効果は以下の通りです。

 

コードは以下のように表示されます。

<template> 
  <div class="border"> 
    <div class="border-title"> 
      <span>我的メッセージ：</span> 
      <span>10</span> 
    </div> 
  </div> 
</ template> 
<stylescoped lang="less"> 
.border { 
  width: 700px; 
  高さ: 200ピクセル; 
  マージントップ: 30px; 
  マージン左: 20px; 
  境界線: 2 ピクセルの黒一色。
  境界半径: 4px; 
.border 
-title {
  幅: 110px; 
  高さ: 30ピクセル; 
  背景: 白; 
  テキスト整列: 中央; 
  マージントップ: -12px; 
  マージン左: 10px; 
} 
</スタイル>