@Vyacheslav_Shilov

Как сделать чтобы при выравнивании всех элементов по центру (тегом 'center') ползунок прогрессбара не уезжал в центр?

5f552702aebce785449341.png5f552725452d0820453970.png
Как сделать чтобы при выравнивании по центру ползунок прогрессбара не уезжал в центр?

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>





body {
    font-family: Arial;
	//background: #f2f2f2;
}

#myProgress {
//position:relative;
   // left: 359px;
 // width: 100%;
//  margin: 13px 0px 0px 0px;
  background-color: grey;
}

#myBar {
width: 240px;
       // position:fixed;
  width: 10%;
  height: 30px;
  
  background-color: green;
}

.container {
	box-shadow: 0 0 5px 3px #bfbfbf;
	width: 349px;
	//width: 50%;
	height: 145px;	
	background: #f2f2f2;
    border: 1px solid #4a4949;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;
}
.containerrr {
	position: absolute;
	width: 320px;
	height: 92px;
	background: white;
	border: 1px solid #d5d3d3;
	margin: 13px 0px 13px 13px;
	border-top-left-radius: 5px;
    border-top-right-radius: 5px;
	border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;
		
}

.top {
position: relative;
	width: 349px;
	//width: 100%;
	height: 27px;	
	//height: 100%;	
    background: #4a4949;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    //padding: 11px 11px 11px 11px;
	//border: 1px solid #4a4949;
}

.content {
 border: 1px solid #4a4949;
	width: 300px;
	height: 150px;
    
    
}
.dot {
display: inline-block;
  // background: white;
    //background-color: #bbb;
	color: white; 
    font-size: 80%
   text-align:left;
    width: 195px;
    height: 120px;
    
}
.dott {
display: block;
 //font-family: Lucida Sans Unicode;
 //font-family: Times New Roman;
 font-family: Trebuchet MS;
 line-width: 510px;
 line-height: 27px;
 text-indent: 4%;

	color: white; 
    font-size: 90%;
   text-align:left;
   
    
}
span {
//display: inline-block;
display: block;
 
 
text-align: left;
}


progress {
 //position:f;
border:0;
width: 300px;
height: 20px;
border-radius: 10px;
background: #black;
}

progress::-webkit-progress-bar {
width: 300px;
height: 20px;
border-radius: 10px;
background: #f1f1f1;
}
progress::-webkit-progress-value {
border-radius: 10px;
background: #ffb76b;
}
progress::-moz-progress-bar {
border-radius: 5px;
background: #ffb76b;
}



</style>
</head>
<body>

<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<center>
<div class="container">

  <div class="top">
	<span class ="dott">Target Indicator Demo</span>
	  </div>
   <div class="containerrr">
		<progress max="100" value="5"></progress>
	</div>
	  <br>
	  <br>
	  <br>
	  <br>
  
   
</div>

</body>
</html>
  • Вопрос задан
  • 49 просмотров
Решения вопроса 1
Thundiverter
@Thundiverter
Добавьте "text-align: left" к progress:
progress {
	//position:f;
	text-align: left; /* ! */
	border:0;
	width: 300px;
	height: 20px;
	border-radius: 10px;
	background: #black;
}
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
sashabeep
@sashabeep
Дней без вопросов про Slick на тостере : 0
Никогда не делайте верстку BR-ами
Тега CENTER тоже давненько не существует
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы