Problem with container/button group position in css in Sugarcube 2.31.1

Authoring Twine
,
1

No matter what I do I cannot get these buttons into the center of this container! I am experimenting with css, so I am just haphazardly throwing this together, so if its not the right way to do this I am interested in learning the right way. anyway, pics and code below:

.container{  
  border: 7px solid white;  
  width: 100%;  
  height: auto;  
  align-items: center;
}  


.btn-group button {
  
  font-family: "Courier New", Monospace;
  padding:20px 24px;
  cursor: pointer;
  border-radius: 10px;
  background: Gainsboro;
  color: DimGrey;
  display: block;
  text-align: center;
  width: 70%
}

<<SeaCaptain>>What be the trouble?<</SeaCaptain>>

<div class="btn-group">
<div class="container">
<<button [[I have questions about the trip.|trip]]>><</button>>////////<<button [[I have questions about the destination.|destination]]>><</button>><<button [[I'd like to go back to my quarters.|quarters]]>><</button>>
</div>

Screenshot (147)
Screenshot (147)1920Ă—1080 79.9 KB

2

You appear to have possibly had two problems, the first being an apparently missing </div> at the end (though likely you just failed to post it). So the passage code should look like:

<<SeaCaptain>>What be the trouble?<</SeaCaptain>>

<div class="btn-group">\
	<div class="container">
		<<button [[I have questions about the trip.|trip]]>><</button>>\
		<<button [[I have questions about the destination.|destination]]>><</button>>\
		<<button [[I'd like to go back to my quarters.|quarters]]>><</button>>
	</div>\
</div>

Using indentation whenever you go inside of an element which has “head” and “tail” parts helps make sure that you don’t forget either part and that they match up correctly. The “\” at the end of some of those lines prevents a line break from occurring between that line and the next one.

Second, I just needed to add margin: auto; (and a semicolon after width: 70%) in the “.btn-group button” style section to get the buttons to be centered horizontally within the “.container” element. Here’s the resulting CSS:

.container {
	border: 7px solid white;
	width: 100%;
	height: auto;
	align-items: center;
}
.btn-group button {
	font-family: "Courier New", Monospace;
	padding: 20px 24px;
	cursor: pointer;
	border-radius: 10px;
	background: Gainsboro;
	color: DimGrey;
	display: block;
	text-align: center;
	width: 70%;
	margin: auto;  
}

That should do the trick. Enjoy! :slight_smile:

1 Like