CSS technique for a horizontal line with words in the middle

HTML

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
     <link href="../../Content/codemod.css" rel="stylesheet" />

    <title></title>
</head>
<body>

<p id="text">
;aldjf;fjsdlf
</p>
<button value="showAlert" onclick="showAlert();"> Show Alert</button>
<div class="overlay">
      <div class="popup">
          <p> Are you Sure This is Completed</p>
          <div class="text-right">
              <button class="btn btn-primary" id="ok">Ok</button>
              <button class="btn btn-cancel" id="cancel" data-dismiss="alert">Cancel</button>
          </div>
      </div>
  </div>
</body>
</html>

CSS

.popup
{
    width: 33.333333%;
    padding: 15px;
    left: 0;
    margin-left: 33.333333%;
    border: 1px solid #ccc;
    border-radius: 10px;
    background: white;
    position: absolute;
    top: 15%;
    box-shadow: 5px 5px 5px #000;
    z-index: 10001;
}
.overlay {
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,.85);
    z-index: 10000;
}
@media (min-width: 768px) {
    .popup {
        width: 66.66666666%;
        margin-left: 16.666666%;
    }
}

@media (min-width: 992px) {
    .popup {
        width: 50%;
        margin-left: 25%;
    }
}

@media (min-width: 1200px) {
    .popup {
        width: 33.33333%;
        margin-left: 33.33333%;
    }
}

JavaScript

function showAlert() {
if($(ok))
{	document.getElementById('text').innerHTML = document.getElementById('text').innerHTML.strike;
}
}